Vue_(组件通讯)父子组件简单关系
Vue组件 传送门
在Vue的组件内也可以定义组件，这种关系成为父子组件的关系
如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是
Vue实例 -- 根组件 root
component-a – 相对于root 这是子组件，相对于component-b这是 父组件
component-b -- 子组件
目录结构
简单的通过在父组件调用子组件，但父组件的值是无法直接传递给子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component></father-component> </div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}}</span> <hr /> <child-component></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}}</span>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : { },
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template"
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_fatherAndChild.html
实现过程
在<body>中通过<div>调用父组件<father-component>去调用子组件<child-component>
<body>
<div id="GaryId">
<father-component></father-component>
</div>
</body>
父子组建，在父组件与子组件中分别调用父组件data()域中的值
<template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}}</span> <hr /> <child-component></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}}</span>
</div>
</template>
在Vue中子组件嵌套在父组件当中，其中给父组件name属性赋值"Gary"
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template"
}
}
}
}
Vue_(组件通讯)父子组件简单关系的更多相关文章
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- 总结Vue第二天：自定义子组件、父子组件通信、插槽
总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
随机推荐
- stuff拼接字符串
stuff stuff(param1,startIndex,length,param2) 说明:将param1中自startIndex(SQL中都是从1开始,而非0)起,删除length个字符,然后用 ...
- svn的一些使用技巧
新项目的目录结构说明: 代码分三部分 1.01_Trunk(开发主干) 2.02_Branches(开发分支) 3.03_Tags(提交代码区) 文档区 请注意SVN的路径是区分大小写的! 与VSS的 ...
- win DLL 笔记
DLL 头文件: #ifdef DLL_API #else #define DLL 导出类 class DLL_API point { public: void aaa() { } } 导出类中函数 ...
- mqtt协议实现 java服务端推送功能（三）项目中给多个用户推送功能
接着上一篇说,上一篇的TOPIC是写死的,然而在实际项目中要给不同用户 也就是不同的topic进行推送 所以要写活 package com.fh.controller.information.push ...
- javascript头像上传
上传头像: 相关关键词:ondragover(拖动元素在投放区内移动) ondrop (元素放在投放区触发但是要去处理浏览器默认事件的影响:ondragenter.ondragover) dataTr ...
- React中使用遍历
1.使用for(let item of items){} render(){ var itemList = [] for(let item of items){ itemList.push(<I ...
- JAVA语言程序设计课后习题----第五单元解析（仅供参考）
1 本题是水题,题目要求你求最大值.最小值,建议你用Arrays.sort函数进行排序,最大值.最小值就可以确定了 import java.util.Arrays; import java.util. ...
- 关于同一台服务器上两个PHP项目相互访问超时的问题
当一台服务器部署多个PHP项目,各自运行时并无干扰, 即使都使用 9000端口来跑php 但是有一种情况,当其中一个项目需要调用另一个php项目的接口时,便会超时,这是因为php是单线程的同步的 也许 ...
- Delphi 图像组件（Image）
樊伟胜
- from表单中 action的后面"" 内如果是 servlet的虚拟路径的话
<form action="login" method="post"> ====================================== ...