父子组件通信

父传子 (props)

(1)在父组件中使用子组件时，给子组件一个自定义属性，这个属性绑定了父组件中的数据
(2)然后在子组件中用props接收自定义的属性
(3)子组件使用父组件数据

//(1)父组件中：
<Son :fatherName="name" :fatherAge="age"/>
//(2)子组件中：
props: ['fatherName','fatherAge']
//(3)子组件中：
<h3>我的父亲是{{fatherName}} 组件</h3>
<h3>我的父亲今年{{fatherAge}} 岁了</h3>

子传父 (自定义事件)

(1)在父组件中给子组件绑定自定义事件，<Son @xxx="func"/>
func是自定义事件被触发后，执行的回调（即自定义事件被触发后，父组件该做些什么）(2)如何触发自定义事件：子组件做了某些事情后，告诉父组件，我触发了自定义事件，并捎带一些数据
(3)父组件使用子组件数据

//(1)父组件中：
<Son @getFromSon="showSon"/>showSon(name,age) {console.log(`My son's name is ${name}, he is ${age} now!`);this.sonName = namethis.sonAge = age
}
//(2)子组件中：
<button @click="sendToFather">点我传信息给父亲</button>sendToFather() {this.$emit('getFromSon',this.name,this.age)
}
//(3)父组件中：
<h3>我的儿子是{{sonName ? sonName : '不知道'}}</h3>
<h3>我的儿子今年{{sonAge ? sonAge : '不知道多少'}} 岁了</h3>

完整代码

Father.vue:

<template><div><h3>我是{{name}} 组件</h3><h3>我今年{{age}} 岁了</h3><h3>我的儿子是{{sonName ? sonName : '不知道'}}</h3><h3>我的儿子今年{{sonAge ? sonAge : '不知道多少'}} 岁了</h3><br><br><Son :fatherName="name" :fatherAge="age" @getFromSon="showSon"/></div>
</template><script>import Son from '@/components/Son.vue'export default {name: 'Father',data() {return {name: 'AAA',age: 32,sonName: '',sonAge: 0}},components: { Son },methods: {showSon(name,age) {console.log(`My son's name is ${name}, he is ${age} now!`);this.sonName = namethis.sonAge = age}}}
</script><style></style>

Son.vue:

<template><div><h3>我是{{name}} 组件</h3><h3>我今年{{age}} 岁了</h3><h3>我的父亲是{{fatherName}} 组件</h3><h3>我的父亲今年{{fatherAge}} 岁了</h3><button @click="sendToFather">点我传信息给父亲</button></div>
</template><script>export default {name: 'Son',data() {return {name: 'aaa',age: 6}},props: ['fatherName','fatherAge'],methods: {sendToFather() {this.$emit('getFromSon',this.name,this.age)}}}
</script><style></style>

效果

【Vue父子组件间通信】相关推荐

vue 父子组件间通信
前言在vue项目中,封装组件,涉及到父子组件的传值,本文主要讲解父子组件之间传值的方法. 一.props / $emit 适用于父子组件通信,单向数据流,这种方法是 vue 组件的基础. 二.ref ...
Vue父子组件间通信
组件是vue.js最强大的功能之一,但组件之间的作用域是相互独立的,这就意味着不同组件之间的数据是无法相互引用的.为实现组件之间的通信,vue为我们提供了三种方式:prop.ref.emit. 首先创 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
Vue实现组件间通信的七种方式
1. props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信: 父传子:父组件通过import引入子组件,并注册,在子组件标签上添加要传递的属 ...
vue中组件间通信的6种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的. 除了使用vuex外还有下面6种组件间 ...
vue -- watch侦听器与父子组件间通信
watch侦听器方式一 1.默认有两个参数 newValue与oldValue 2.如果是对象类型那么拿到的是代理对象如果要进行深度监听需要加上 deep : true 如果想要第一次渲染直接执 ...
Vue 父子组件间的通信
前言在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法父组件传值给子组件,这 ...
Vue2.0入门系列——父子组件间通信
1.子组件更新,父组件不变点击"按钮"按钮,子组件数据被修改,父组件数据不变 =========>>>>>> 项目源代码, <hea ...
Vue父子组件互相通信实例
组件实例之间的作用域是独立的,意味了不应该在子组件的模板内直接引用父组件的数据,但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件. prop 是父组件用来传 ...

【Vue父子组件间通信】

Vue父子组件间通信

父子组件通信

父传子 (props)

子传父 (自定义事件)

完整代码

效果

【Vue父子组件间通信】相关推荐

最新文章

热门文章