Vue2.x 组件通信方式
Vue2.x 组件通信共有12种
- props
- $emit / v-on
- .sync
- v-model
- ref
-
parent
-
listeners
- provide / inject
- EventBus
- Vuex
- $root
- slot
父子组件通信可以用：
- props
- $emit / v-on
-
- .sync v-model
-
跨层级组件通信可以用：
- provide/inject
- EventBus
- Vuex
-
- $root
Vue2.x 通信使用写法
下面把每一种组件通信方式的写法一一列出
1、props
父组件向子组件传送数据，这应该是最常用的方式了
子组件接收到数据之后，**不能直接修改**父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed
<template>
<child :msg="msg"></child>
</template>
// Child.vue 接收
export default {
// 写法一 用数组接收
props:['msg'],
// 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
props:{
msg:{
type:String,
default:'这是默认数据'
}
},
mounted(){
console.log(this.msg)
},
}
2、sync
可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据。
// Parent.vue
<template>
<child :page.sync="page"></child>
</template>
<script>
export default {
data(){
return {
page:1
}
}
}
</script>
// Child.vue
<template>
<el-button @click="open()">点击我改变页面数</el-button>
<div>当前页码数:{{currentPage}}</div>
</template>
<script>
export default {
props:["page"],
computed: {
// 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
currentPage: {
get(){
return this.page
},
set(newVal){
this.$emit("update:page", newVal)
}
}
},
methods: {
open(){
this.currentPage = 10
},
}
}
</script>
3、v-model
和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据
// Parent.vue
<template>
<child v-model="value"></child>
<div>父组件:{{value}}</div>
</template>
<script>
export default {
data(){
return {
value:1
}
}
}
// Child.vue
<template>
<input :value="value" @input="handlerChange">
<div>子组件: {{value}}</div>
</template>
export default {
props:["value"],
// 可以修改事件名，默认为 input
model:{
event:"updateValue"
},
methods:{
handlerChange(e){
this.$emit("input", e.target.value)
// 如果有上面的重命名就是这样
this.$emit("updateValue", e.target.value)
}
}
}
</script>
4、ref
ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法。
// Child.vue
export default {
data(){
return {
name:"小赵"
}
},
methods:{
someMethod(msg){
console.log(msg)
}
}
}
// Parent.vue
<template>
<child ref="childFlag"></child>
</template>
<script>
export default {
mounted(){
const childData = this.$refs.childFlag
console.log(childData.name) // 小赵
childData.someMethod("调用了子组件的方法")
}
}
</script>
用ref 注册子组件，父组件可以通过this.$refs.xx.fn调用子组件里的函数，但是有时会出现 fn 为定义的情况，这是为什么呢？
vue 官网中ref 下有一段话 "关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。"
也就是说 ref 只有等页面加载完成好之后你才能调用 this.refs 的，所以要等到页面渲染之后拿才可以
解决办法：
1、如果你在mounted里获取this.$refs，因为dom还未完全加载，所以你是拿不到的， update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，就可以使用this.$refs了
2、如果写在method中，那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了
3、或者加个定时器延时加载this.$refs（这个方法还没有试）。
拓展：
通过 on 绑定事件 (比v-on更灵活)
//父组件
<template>
<div id="app">
<Student ref="student"></Student>
</div>
</template>
<script>
import Student from './components/student.vue'
console.log(Student)
export default {
name: 'App',
components: {
Student
},
mounted () {
this.$refs.student.$on('knowSomething', this.doSomething) //给student组件绑定自定义事件
/*
this.$refs.student.$on('knowSomething', this.doSomething) //doSomething函数中的this指向
的是父组件App组件
this.$refs.student.$on('knowSomething', () =>{
这里的this指向的是父组件App组件
})
this.$refs.student.$on('knowSomething', function(){
这里的this指向的是触发knowSomething事件的组件
})
*/
//this.$refs.student.$once('knowSomething', this.doSomething) //绑定自定义事件，
但是只能触发一次
},
methods: {
doSomething (name, something) {
alert('APP知道了学生' + name + '在' + something)
}
}
}
</script>
//子组件
<template>
<div>
<div>{{ student.name }}--{{ student.age }}</div>
<button @click="tellApp">tellApp</button>
<button @click="unbind">解绑knowSomething事件</button>
</div>
</template>
<script>
export default {
data () {
return {
student: {
name: '张三',
age: '18'
}
}
},
methods: {
tellApp () {
this.$emit('knowSomething', this.student.name, '学习')
},
unbind(){
this.$off('knowSomething') //解绑knowSomething事件
/*
this.$off(['knowSomething','a','b']) //解绑多个事件
this.$off() //解绑所有事件
*/
}
}
}
</script>
5、$emit / v-on
子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作。
// Child.vue 派发
<template>
<div>
<el-button @click="handleClick()">点击派发</el-button>
</div>
</template>
<script>
export default {
data(){
return { msg: "这是发给父组件的信息" }
},
methods: {
handleClick(){
this.$emit("sendMsg",this.msg)
}
},
}
</script>
// Parent.vue 响应
<template>
<child v-on:sendMsg="getChildMsg"></child>
// 或 简写
<child @sendMsg="getChildMsg"></child>
</template>
export default {
methods:{
getChildMsg(msg){
console.log(msg) // 这是父组件接收到的消息
}
}
}
6、listeners
多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时。
attrs：包含父作用域里除class和style除外的非props属性集合。通过this.attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"
listeners：包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过v−on="linteners"使用方式是相同的。
// Parent.vue
<template>
<child :name="name" title="1111" ></child>
</template
export default{
data(){
return {
name:"小赵"
}
}
}
// Child.vue
<template>
// 继续传给孙子组件
<sun-child v-bind="$attrs"></sun-child>
</template>
export default{
props:["name"], // 这里可以接收，也可以不接收
mounted(){
// 如果props接收了name 就是 { title:1111 }，否则就是{ name:"小赵", title:1111 }
console.log(this.$attrs)
}
}
<!--父组件 parent.vue-->
<template>
<child :name="name" :message="message" @sayHello="sayHello"></child>
</template>
<script>
export default {
inheritAttrs: false,
data() {
return {
name: '通信',
message: 'Hi',
}
},
methods: {
sayHello(mes) {
console.log('mes', mes) // => "hello"
},
},
}
</script>
<!--子组件 child.vue-->
<template>
<grandchild v-bind="$attrs" v-on="$listeners"></grandchild>
</template>
<script>
export default {
data() {
return {}
},
props: {
name,
},
}
</script>
<!--孙子组件 grand-child.vue-->
<template>
</template>
<script>
export default {
created() {
this.$emit('sayHello', 'hello')
},
}
</script>
