Vue父子组件之间的相互通信
组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作。它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值是通过自定义事件。
1.父组件向子组件传值
<div id="app">
<parent></parent>
</div> <template id="parent">
<div>
<div style="border:1px solid red;width: 300px;">
<h1>父组件</h1>
<p>{{parentMsg}}</p>
</div>
<child :get-parent="parentMsg"></child>
</div>
</template> <template id="child">
<div>
<h1>子组件</h1>
<p>{{childMsg}}</p>
<button @click="printParentMsg()">父组件信息</button>
</div>
</template> <script> var child={
data(){
return {
childMsg:"我是子组件数据"
}
},
template:"#child",
props: ['getParent'],
methods: {
printParentMsg(){
alert('父组件信息:' + this.getParent);
}
}
}; var parent={ data(){
return {
parentMsg:"我是父组件的数据"
}
}, components:{
'child':child
}, template: '#parent'
} new Vue({
el:"#app",
components:{
'parent':parent
}
}); </script>
具体方法:
1.子组件在props中创建一个属性,用来接收父组件传来的值
2.父组件中注册子组件
3.在父组件模板中的子组件标签添加对应于子组件props中的属性
4.把需要传递的值赋给上一步子组件标签创建的属性(这里要注意的是props中的属性用驼峰命名法,标签中的属性用横杠命名法)
2.子组件向父组件传值
<div id="app">
<parent></parent>
</div> <template id="parent">
<div>
<div style="border:1px solid red;width: 300px;">
<h1>父组件</h1>
<p>{{parentMsg}}</p>
</div>
<child v-on:receive-msg="handleMsg"></child>
</div>
</template> <template id="child">
<div>
<h1>子组件</h1>
<p>{{childMsg}}</p>
<button @click="sendToParent">传递信息</button>
</div>
</template> <script> var child={
data(){
return {
childMsg:"我是子组件数据"
}
},
template:"#child",
props: ['getParent'],
methods: {
sendToParent(){
console.log('sendToparent')
this.$emit("receive-msg", "已经收到子组件传来的消息");
}
}
}; var parent={ data(){
return {
parentMsg:"我是父组件的数据"
}
}, components:{
'child':child
}, template: '#parent', methods: {
handleMsg: function(msg){
console.log('handleMsg')
alert(msg);
}
}
} new Vue({
el:"#app",
components:{
'parent':parent
}
}); </script>
具体方法:
1.子组件在某种条件下触发一个自定义事件
2.该自定义事件需要挂载在父组件的子组件标签上,让父组件可以监听到这个自定义事件
3.将需要传的值放在$emit方法的第二个参数上,该值将作为实参传递给响应自定义事件的方法
(注意!这里有个小坑:自定义事件貌似不支持驼峰命名法,改用横杠命名即可,否则会接收不到值)
Vue父子组件之间的相互通信的更多相关文章
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件之间互相获取data值&调用方法(非props)
vue 子组件调用父组件方法&数据 vue有$parent这么一个属性,在子组件中就能拿到父组件的数据 this.$parent.xxx 就能调用父组件的方法 this.$parent.xxx ...
- vue父子组件之间的通信
利用props在子组件接受父组件传过来的值1.父组件parentComp.vue <template> <childComp :fromParentToChild="fro ...
- Vue父子组件之间通信
1.父 -> 子.通过props //father.vue <template> <div id="father"> <div><l ...
- vue父子组件之间相互传值
1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...
随机推荐
- Git错误merge怎么办?
Git怎样撤销一次分支的合并Merge git merge了错误分支,如何优雅的回退到merge前的状态? 版本回退
- Kafka-python 客户端导致的 cpu 使用过高,且无法消费消息的问题
今天遇到一个情况使用了 Kafka-python 1.3.3 来操作读取 broker 1.0.1 版本的 kafka.出现了 rebalance 之后分配到了客户端,但是 cpu 利用率很高且无法消 ...
- Activiti6作业执行器Job Executor配置(学习笔记)
内容概况: 异步执行配置相关: asyncExecutorActivate:这个属性是激活作业执行器,它的默认参数是false,只有设为true,activiti启动的时候才会开启线程池去扫描定时操作 ...
- python爬虫爬取赶集网数据
一.创建项目 scrapy startproject putu 二.创建spider文件 scrapy genspider patubole patubole.com 三.利用chrome浏览器 ...
- monkey事件简介
操作事件简介 Monkey所执行的随机事件流中包含11大事件,分别是触摸事件.手势事件.二指缩放事件.轨迹事件.屏幕旋转事件.基本导航事件.主要导航事件.系统按键事件.启动Activity事件.键盘事 ...
- kNN总结
1,kNN不训练模型 2,主要是通过计算 3,计算点到每个近邻的距离,按照距离递增排序,选取距离最近的k个邻居,在k个邻居中出现频率最大的就是它的分类结果 4,计算距离有不同的距离公式,可以看每种公式 ...
- Spring MVC 使用介绍(八)—— 类型转换
一.概述 spring类型转换有两种方式: PropertyEditor:可实现String<--->Object 之间相互转换 Converter:可实现任意类型的相互转换 类型转换的过 ...
- P2495 [SDOI2011]消耗战 lca倍增+虚树+树形dp
题目:给出n个点的树 q次询问 问切断 k个点(不和1号点联通)的最小代价是多少 思路:树形dp sum[i]表示切断i的子树中需要切断的点的最小代价是多少 mi[i]表示1--i中的最小边权 ...
- Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器-插件开发
Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器 Magento 2 Plugin is a technical plugin for your b ...
- 【BZOJ5503】[GXOI/GZOI2019]宝牌一大堆(动态规划)
[BZOJ5503][GXOI/GZOI2019]宝牌一大堆(动态规划) 题面 BZOJ 洛谷 题解 首先特殊牌型直接特判. 然后剩下的部分可以直接\(dp\),直接把所有可以存的全部带进去大力\(d ...