Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件，这种关系成为父子组件的关系；
如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是：
Vue实例 -- 根组件 root component-a – 相对于root 这是子组件，相对于component-b这是 父组件 component-b -- 子组件
示例：
当把代码写在如图所示的位置会出现这样的错误
出现的错误显示：
错误显示<child-component>未定义
当把<child-component></child-component>放在如图所示的位置，还会出现这样的错误：
显示的错误：
错误显示的是在一个组件中只能有一个根节点，
解决方案，使组件只有一个根节点，正确结果显示
代码截图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件之间的通信</title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div>
<father-component></father-component>
</div>
</body>
<template id="father-template">
<div>
<h2> 父组件</h2>
<hr />
<child-component></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
</div>
</template>
<script> new Vue({
components:{
"father-component":{
template:'#father-template', components:{
"child-component":{ template:'#child-template' }
} }
} }).$mount('div');
</script>
</html>
初始时，在父组件中定义一个数据：
显示如下：
代码如下：
<template id="father-template">
<div>
<h2> 父组件</h2>
username:<span>{{name}}</span>
<hr />
<child-component></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p> </div>
</template>
<script> new Vue({
components:{
"father-component":{
data(){
return{
name:'perfect'
}
},
template:'#father-template', components:{
"child-component":{ template:'#child-template' }
} }
} }).$mount('div');
</script>
如想在子组件中进行使用父组件的数据时：
会出现这样的错误：
出现该错误的代码：
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span>{{name}}</span> </div>
</template>
由该错误可知，即使两个组件是父子关系，但是他们的数据时独立的，如果需要使他们能共用数据，需要使它们通信，在下面的博文中，我会介绍它们如何去进行通信的。
Vue 组件&组件之间的通信 父子组件的通信的更多相关文章
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue（二十六）父子组件通信
今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题 一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue组件命名和传值 and 父子组件传值
https://www.cnblogs.com/lianxisheng/p/10907350.html
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- 三大前端框架（react、vue、angular2+）父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- Vue(基础四)_总结五种父子组件之间的通信方式
一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
随机推荐
- jquery 实现tab切换
大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码 <!DOCTYPE html> <html lang ...
- ST表 || RMQ问题 || BZOJ 1699: [Usaco2007 Jan]Balanced Lineup排队 || Luogu P2880 [USACO07JAN]平衡的阵容Balanced Lineup
题面:P2880 [USACO07JAN]平衡的阵容Balanced Lineup 题解: ST表板子 代码: #include<cstdio> #include<cstring&g ...
- css_文本溢出
1.单行文本溢出隐藏,显示省略号 2.多行文本溢出隐藏,显示省略号 1.只针对用webkit内核浏览器渲染页面才会有效果 2.(多行文本溢出隐藏,显示省略号)通用方法
- 3. Scala运算符
3.1 运算符介绍 运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等 1) 算术运算符 2) 赋值运算符 3) 比较运算符(关系运算符) 4) 逻辑运算符 5) 位运算符 3.2 算术运算符 ...
- Express全系列教程之(六)：cookie的使用
一.关于Cookie 在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失:当我们浏览了商品后历史记录里出现了我们点击过的商品:当我们推回到首页后,推荐商品也为我们选出了相似物品:事实 ...
- 2018-2019-2 20165317《网络对抗技术》Exp1 PC平台逆向破解
2018-2019-2 20165317<网络对抗技术>Exp1 PC平台逆向破解 实验目的 掌握NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP:无作用,英文&quo ...
- Charles 使用
一.设置域名焦点 View->Focused Hosts…-> 二.抓包https:配置证书 1. 电脑安装SSL证书 选择 “Help” -> “SSL Proxying” -&g ...
- react高阶组件的使用
为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...
- U盘挂载指令
相关步骤来自于百度 1.先确定U盘格式,如果是ntfs格式,需要先安装3g-ntfs这个软件支持ntfs格式,以下默认U盘为fat32格式 2.使用fdisk -l 查看分区表,找到u盘的设备号,比如 ...
- python编写shell脚本
模块 os模块和shutil模块主要用于在python中执行一些Linux相关的操作,其中 os.system(command) 可以直接运行Linux命令,如os.system('ls'). 不过, ...