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> 元素上创建双向数据绑定. ...
随机推荐
- prefixOverrides使用注意是事项
不可以prefixOverrides=',' 否则执行的sql格式可能为 id ,time ,name... 导致sql报错,或者执行结果出错
- LinqToSQL3
Lambda Lambda表达式和匿名方法很相似,但Lambda表达式比匿名方法更灵活,并且语法比匿名方法更简洁. 在LINQ中可以使用Lambda表达式创建委托,这些委托将稍后执行查询时被调用. L ...
- Yali7月集训Contest2 T1 Cube 题解
题目链接: 连我们都只有纸质题目...话说雅礼集训都是这样的吗... 大意 0维基本图形是一个点 1维基本图形是一条线段 2维基本图形是一个正方形 3维基本图形是一个正方体 4维基本图形是... 求\ ...
- ui组件库
基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...
- List<int>转化为逗号链接的字符串
/// <summary> /// List<int>转化为逗号链接的字符串 /// </summary> /// <param name="lis ...
- springboot搭建web项目与使用配置文件
目录 一.准备工作 二.创建基础web项目 1. maven配置 2.创建maven项目.配置pom.xml为web基础项目 3.编写启动类 4.使用maven打包 5.使用命令java -jar x ...
- jar包编译成 dex
1.将需要合并的jar放到同一个目录 2.编写一个google.xml文件写入如下内容 <!--?xml version="1.0" encoding="utf-8 ...
- remote mounting from windows to linux
8 Ways To Mount SMBfs (SAMBA FILE SYSTEM) In Linux. Sep 8, 2009 How to Mount smbfs (SAMBA file syste ...
- 【wifi移植 3】开发板wifi自动获取IP
内核版本:3.4.61 1. 配置内核,支持DHCP ~/kernel$ make menuconfig [*] Networking support ---> Networking opti ...
- hadoop--大数据生态圈中最基础、最重要的组件
hadoop是什么? hadoop是一个由Apache基金会所开发的分布式系统基础架构,hdfs分布式文件存储.MapReduce并行计算.主要是用来解决海量数据的存储和海量数据的分析计算问题,这是狭 ...