vue组件通信
在实习过程中,有许多地方需要用到组件通信,尝试过几种方法,现来总结一下
说明:Father.vue 是父组件 ,Brother.vue和Brather.vue是子组件
父子通信
父传子
- props:
父组件:
通过v-bind绑定一个变量,childBrather则是子组件要引用的名称。
<div>
我是父组件
<Brather v-bind:childBrather="content"></Brather>
</div>
import Brather from './brother/Brather'
export default {
data () {
return {
content: '我是父'
}
},
components: { Brather }
}
子组件:
export default {
props: ['childBrather'], //父组件传过来的值
data () {
},
created () {
console.log(this.childBrather) //像正常data变量一样使用即可
}
}
props格式:
//格式一
props: {
childBrather: String // 这里指定了字符串类型,如果类型不一致会警告哦
}
//格式二:
props: {
childBrather: {
type: String,
default: 'sichaoyun'
}
}
props: ['childBrather']
//格式三
子传父:
- this.$emit绑定一个事件
子组件
<div>
我是brather组件
<button @click="toFather">点我触发</button> //绑定一个事件 在此中向父组件传值
</div>
data () {
return {
form: {
name: 'Joanne',
age: 22
}
}
},
methods: {
toFather () {
this.$emit('myFunction', this.form) //向父组件传值,第一个参数为父组件要绑定的函数名,第二个为要传的值
}
}
父组件:
<div>
我是父组件
<Brather @myFunction="toshow"></Brather>
</div>
methods: {
toshow (msg) {
console.log(msg) //接受一个参数,该参数则为接收的值
}
}
- this.$emit('input',value)和v-model
v-model这个双向绑定相当于做了两个操作:
给当前这个组件添加了一个value属性;
给当前这个组件绑定了一个input事件;
通常用在input等组件上
子组件:
<div>
我是brather组件
<input @input="toFather" v-model="content"> //绑定input事件 ,只要输入就能使其传入父组件
</div>
props: ['value'], //即父组件v-model的值
data () {
return {
content: ''
}
},
methods: {
toFather () {
this.$emit('input', this.content) //传入父组件
}
}
父组件:
<div>
我是父组件
<Brather v-model="faContent"></Brather>
</div>
data () {
return {
faContent: ''
}
},
created () {
},
components: { Brather },
watch:
faContent:function(){
console.log('father', this.faContent) //子组件变化,父组件也会跟着变化
}
- $refs
官方: $refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
父组件可以通过此拿到子组件实例,data值和方法
子组件:
<div>
我是brather组件
</div>
data () {
return {
content: '我是子组件啦啦啦'
}
},
methods: {
myfunction () {
console.log('我是方法')
}
}
父组件:
<div>
我是父组件
<Brather ref="myson"></Brather>
<button @click="toMySon"></button>
</div>
data () {
return {
}
},
created () {
},
components: { Brather },
methods: {
toMySon () {
console.log(this.$refs.myson.content)
this.$refs.myson.myfunction()
}
}
兄弟通信
1.bus中央总线
借助一个媒介传值
创建一个eventBus.js
import Vue from 'vue'
export default new Vue()
//哥哥
<div>
我是brather组件
<button @click="myBrother">传值给老弟</button>
</div>
import bus from './eventBus'
data () {
return {
content: '我是哥哥组件啦啦啦'
}
},
methods: {
myBrother () {
bus.$emit('button', this.content)
}
}
弟弟
import bus from './eventBus'
export default {
created () {
bus.$on('button', (msg) => {
console.log(msg)
})
}
}
任意关系均可使用此方法