【VUE】父子组件通讯

父传子

父传子用到自定义属性和 props
父给子组件绑定一个自定义属性然后子组件内接受这个自定义属性

 // 父组件代码<div id="app">// SonCpn 为注册的子组件 自定义属性名为 fatherData // 将我们父组件data中的fatherData 值传过去<SonCpn :fatherData="fatherData"></SonCpn></div>// jsimport SonCpn from './components/SonCpn.vue'export default {name: 'App',// 注册子组件components: {SonCpn},data(){return {fatherData:[{id:1,title:'德莱文'},{id:2,title:'辛德拉'},{id:3,title:'火男'},{id:4,title:'男刀'},{id:5,title:'女坦'},{id:6,title:'泽丽'}]}},// 子组件代码
<template><div>// 渲染父组件传过来的数据<p v-for="item in fatherData" :key="item.id">{{item.title}}</p></div>
</template><script>
export default {name:'SonCpn',// 使用props 来接受父组件传过来的数据props:['fatherData'],
}
</script>

假设我们要在子组件中点击父组件传来的数据的某一项并传递过去就会用到子组件向父组件传递数据的方法

子传父

父组件需要在子组件上写一个自定义事件然后子组件用$emit(父组件自定义事件名，需要传递的数据) 来触发父组件的事件这样就完成了子向父传递数据

 // 父组件代码<template><div id="app">// 渲染子组件传过来的参数<div>子组件传过来的数据为 <span>{{sonData.title}}</span></div><SonCpn :fatherData="fatherData" @getItem="getItem"></SonCpn></div>
</template><script>
// 引入子组件
import SonCpn from './components/SonCpn.vue'export default {name: 'App',// 注册子组件components: {SonCpn},data(){return {fatherData:[{id:1,title:'德莱文'},{id:2,title:'辛德拉'},{id:3,title:'火男'},{id:4,title:'男刀'},{id:5,title:'女坦'},{id:6,title:'泽丽'}],sonData:{}}},methods:{// 自定义事件 ： 接收父组件传递过来的参数 并且赋值到sonData中getItem(i) {this.sonData = i}}
}
</script><style>span {color: red;}
</style>// 子组件代码<template><div><p v-for="item in fatherData" :key="item.id" @click="emitItem(item)">{{item.title}}</p></div>
</template><script>
export default {name:'SonCpn',props:['fatherData'],methods:{// 子组件的点击事件emitItem(i) {// 向父组件的自定义事件 传递一个i的参数this.$emit('getItem',i)}}
}
</script><style scoped>p {cursor: pointer;}
</style>

demo效果图

【VUE】父子组件通讯相关推荐

【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
Vue父子组件生命周期
Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
vue 父子组件组件挂载组件通信 slot插槽
目录 vue 父子组件挂载父组件往子组件中传值子组件向父组件传值 this.$emit() this.$refs 父组件可以通过它直接引用注册过的子组件DOM中的数据插槽默认插槽具名插槽 v ...
【Vue父子组件间通信】
Vue父子组件间通信父子组件通信父传子 (props) 子传父 (自定义事件) 完整代码效果父子组件通信父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...

【VUE】父子组件通讯

父传子

子传父

demo效果图

【VUE】父子组件通讯相关推荐

最新文章

热门文章