vue父子组件通信方式哪几种

第一种：props和$emit()

parent.vue

<template><div id="app"><div>父组件：{{message}}</div><ChildrenComponet :message="message" @changeMsgFn="message=$event"/></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{message:'默认数据'}},components: {ChildrenComponet},methods:{changeMessage(msg){console.log(msg)this.message = 'Bye';}}
}
</script>

children.vue

<template><div>子组件：{{message}}<button @click="handleClick">按钮</button></div></template><script>export default {props:['message'],methods:{handleClick(){this.$emit('changeMsgFn','Bye')}}
}
</script><style></style>

按按钮之前：

按按钮之后：

第二种，回调函数callback

parent.vue

<template><div id="app">------父组件------{{message}}<ChildrenComponet :message="message" :changeMsgFn="changeMessage"/></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{message: 'hello!'}},components: {ChildrenComponet},methods:{changeMessage(){this.message = 'Bye'}}
}
</script>

<template><div>------子组件------{{message}}<button @click="changeMsgFn">按钮</button></div></template><script>
// import GrandChild from './GrandChild.vue'
export default {props: ['message', 'changeMsgFn'],components:{// GrandChild},data(){return {}},methods:{}
}
</script>

点击按钮前：

点击按钮后：

第三种，`$parent和$children`

parent.vue

<template><div id="app"><div>父组件：{{message}}</div><ChildrenComponet :message="message"/><button @click="changeChildrenNumber">改变子number</button></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{message:'默认数据'}},components: {ChildrenComponet},methods:{changeChildrenNumber(){this.$children[0].number = 50}}
}
</script>

children.vue

<template><div>子组件：{{number}}<button @click="handleClick">按钮</button></div></template><script>export default {data(){return {number:'初始number'}},props:['message'],methods:{handleClick(){this.$parent[0].message = '测试$parent，我是子组件'}}
}
</script><style></style>

点击“改变子number”前：

点击“改变子number”后

children.vue

<template><div>子组件：{{number}}<button @click="handleClick">改变父number，测试$parent</button></div></template><script>export default {data(){return {number:'初始number'}},methods:{handleClick(){this.$parent.message = '改变$parent成功'}}
}
</script><style></style>

parent.vue

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><div>父组件：{{message}}</div><ChildrenComponet/><button @click="changeChildrenNumber">改变子number</button></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{message:'默认数据'}},components: {ChildrenComponet},methods:{changeChildrenNumber(){this.$children[0].number = 50}}
}
</script>

点击前：

点击后：

第四种，provide和inject

parent.vue

<template><div id="app"><ChildrenComponet/></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{}},provide:{message:"hello"},components: {ChildrenComponet},methods:{}
}
</script>

children.vue

<template><div>子组件：{{message}}</div></template><script>export default {inject:['message'],data(){return {}},methods:{}
}
</script>

运行结果：

第五种，`$attrs`+`$listeners`

parent.vue

<template><div id="app">------父组件------<div>姓名:{{ name }}</div><div>年龄:{{ age }}</div><ChildrenComponet :name="name" :age="age" @changeName="changeName"/></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{name:'小米',age: 33,}},components: {ChildrenComponet},methods:{changeName(){this.name = '小夏'}}
}
</script>

children.vue

<template><div>------子组件------<button @click="$listeners.changeName">按钮</button><GrandChild v-bind="$attrs" /></div></template><script>
import GrandChild from './GrandChild.vue'
export default {components:{GrandChild},data(){return {}},methods:{}
}
</script>

GrandChildren.vue

<template><div>------孙组件------姓名：{{$attrs.name}}年龄：{{$attrs.age}}</div>
</template><script>
export default {}
</script><style></style>

运行结果（从父亲传到了孙子）：

点击按钮后：

第六种，ref

parent.vue

<template><div id="app">------父组件------<ChildrenComponet ref="childComp"/><button @click="changeName">按钮</button></div>
</template><script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {name: 'App',data(){return{name:'小米',age: 33,}},components: {ChildrenComponet},methods:{changeName(){console.log('点击前', this.$refs.childComp.age)this.$refs.childComp.changeAge()console.log('点击后', this.$refs.childComp.age)}}
}
</script>

children.vue

<template><div>------子组件------</div></template><script>
// import GrandChild from './GrandChild.vue'
export default {components:{// GrandChild},data(){return {age:20}},methods:{changeAge(){this.age = 50}}
}
</script>

点击后：

vue父子组件通信方式哪几种相关推荐

Vue父子组件通信的三种方式 props、@eventName、$on
前言 vue 开发中,免不了会用到父子组件的通信,比如调用父类组件的方法或者变量:再比如父组件调用子组件的方法:父子组件相互传递数据等,本文主要通过讲解三种方式(props.evnetName.ev ...
vue父子组件通信方式
1.props+$emit ①父组件引用子组件,并在子组件上v-bind,绑定要传的数据,同时注册引入子组件, 子组件通过props接收父组件传过来的数据,然后通过this.$props.值来用举例 ...
vue父子组件的三种传值方式
vue父子组件的三种传值方式函数类型的props传值 //父组件 <template><Children :getChildName="getChildName" ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
vue父子组件传值之 $emit和props
vue父子组件传值之 $emit和props 前言子组件向父组件传值父组件向子组件传值前言在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props ...
vue父子组件传值的一些坑（深浅拷贝）
本文章转载:https://www.yht7.com/news/116487 1.问题描述父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...

vue父子组件通信方式哪几种

第一种：props和$emit()

第二种，回调函数callback

第三种，`$parent和$children`

第四种，provide和inject

第五种，`$attrs`+`$listeners`

第六种，ref

vue父子组件通信方式哪几种相关推荐

最新文章

热门文章

vue父子组件通信方式哪几种

第一种：props和$emit()

第二种，回调函数callback

第三种，$parent和$children

第四种，provide和inject

第五种，$attrs+$listeners

第六种，ref

vue父子组件通信方式哪几种相关推荐

最新文章

热门文章

第三种，`$parent和$children`

第五种，`$attrs`+`$listeners`