参考文章：https://blog.csdn.net/qq_37288477/article/details/86630428
父子通信：
1.父传子props
官网demo：https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87-Prop-%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<div id="app">
<counter name='1' count='2'>counter>
<blog-post title="My journey with Vue">blog-post>
<blog-post title="Blogging with Vue">blog-post>
<blog-post title="Why Vue is so fun">blog-post>
<blog-post v-for="post in posts" v-bind:title="post.title">blog-post>
div>
<script src="js/vue.js">script>
<script src="js/main.js">script>
body>
html>
Vue.component('counter',{
template:</span><span><</span><span>div</span><span>></span></pre>
<p>{{username}}</p>
<pre><span><span>div</span><span>></span><span>,
props:['name','count'],
data:function(){
return {
username:this.name,
counter:this.count
}
},
methods:{
add:function(){
this.counter++;
console.log(this.counter)
}
}
})
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}h3>'
})
new Vue({
el:'#app',
data:{
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
通过props实现父到子传递
2.子传父
官网demo： https://cn.vuejs.org/v2/api/#vm-emit
- 参数：
{string} eventName[...args]触发当前实例上的事件。附加参数都会传给监听器回调。
<h3>子父通信h3> <div id="app2"> <welcome_ass v-on:welcome='say'>welcome_ass> div>
Vue.component('welcome_ass',{
template:
</span><span><</span><span>button </span><span>v-on:click</span><span>="$emit('welcome',message)"</span><span>></span><span>
Click me to be welcomed
</span><span><span>button</span><span>></span><span>
,
data:function(){
return {
message:{a:'1',b:'2'}
}
}
})
new Vue({
el:'#app2',
methods:{
say:function(data){
console.log(data)
}
}
})
点击子组件，父获取
兄弟组件通信：
- 参数：
{string | Array<string>} event</string>(数组只在 2.2.0+ 中支持){Function} callback- 用法： 监听当前实例上的自定义事件。事件可以由
vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
：官网https://cn.vuejs.org/v2/api/#mounted
- 类型：
Function - 详细： 实例被挂载后调用，这时
el被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。
<h3>平行组件通信h3> <div id="app3"> <aaa>aaa> <bbb>bbb> div>
var Event=new Vue();
Vue.component('aaa',{
template:
</span><span><</span><span>div</span><span>></span>
<span><</span><span>button </span><span>v-on:click</span><span>='on_change'</span><span>></span>点击<span><span>button</span><span>></span>
<span><span>div</span><span>></span><span>
,
methods:{
on_change:function(){
Event.$emit("test","111")
}
}
})
Vue.component('bbb',{
template:
</span><span><</span><span>div</span><span>></span>
<span><</span><span>input </span><span>v-model</span><span>="val"</span><span>/></span><span>{{val}}
</span><span><span>div</span><span>></span><span>
,
data:function(){
return{
val:1
}
},
mounted:function(){
var me=this;
Event.$on('test',function(msg){
me.val=msg;
})
}
})
new Vue({
el:'#app3'
})
点击a组件按钮，b组件监听到并且将数据获取
Original: https://www.cnblogs.com/crazy-lc/p/15063551.html
Author: MyBeans
Title: Vue(十二)—组件通信
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/714389/
转载文章受原作者版权保护。转载请注明原作者出处！