vue组件通讯等问题

vue组件通讯的几种常用方式

1. 通过props与$emit 的方式

// 父组件中<template><child :msg="msg"  @changeParentMethod="change"></child>
</template><script>data(){return{msg:"parent transfer value to children"}},methods:{change(val){this.msg = val}}
</script>

// 子组件   child<template><h1 @click="clickH1">{{msg}}</h1>
</template><script>props:{msg:{type：string,default:"default value"}},methods:{clickH1(){this.$emit('changeParentMethod','child value')}}
</script>

注：Vue是单项数据流，不能直接修改prop的值，来达到子组件修改父组件值的目的

2. prop与$emit的语法糖 .sync与$emit(update:xxx)

// 以上面的代码为例：
// 父组件
<template><child :msg.sync="msg" ></child>
</template><script>data(){return{msg:"parent transfer value to children"}}
</script>

// 子组件<template><h1 @click="clickH1">{{msg}}</h1>
</template><script>props:{msg:{type：string,default:"default value"}},methods:{clickH1(){this.$emit('update:msg','child value')}}
</script>

注： this.$emit(‘update:msg’,‘child value’) 中的msg要以驼峰方式命名。

3. 通过$ref传值

// 以上面的代码为例：
// 父组件
<template><child ref="childRef" ></child><button @click="bthClick"></button>
</template><script>data(){return{msg:"parent transfer value to children"}},methods:{bthClick(){this.$ref.childRef.recieveParent(this.msg)}}
</script>

// 子组件<template><h1>父组件传来的数据{{msgFromParent}}</h1>
</template><script>data(){return{msgFromParent:""}}methods:{recieveParent(val){this.msgFromParent = val;}}
</script>

一般常用于调用子组件的方法，给子组件传值。

4. provide / inject传值

默认情况下不是响应式的，只是起到了传值的作用

// 以上面的代码为例：
// 父组件
<template><child></child>
</template><script>data(){return{msg:"parent transfer value to children"}},provide():{return{msgProvide:this.msg}}
</script>

// 子组件<template><h1>父组件传来的数据{{msgProvide}}</h1>
</template><script>data(){return{childData:""}}inject: ['msgProvide']
</script>

通过传递响应式对象，让其变成响应式

// 以上面的代码为例：
// 父组件
<template><child></child>
</template><script>data(){return{msgObj:{msg:"parent transfer value to children"}}},provide():{return{msgProvideObj:this.msgObj}}
</script>

// 子组件<template><h1>父组件传来的数据{{msgProvideObj.msg}}</h1>
</template><script>data(){return{childData:""}}inject: ['msgProvideObj']
</script>

传递this，使其变成响应式

// 以上面的代码为例：
// 父组件
<template><child></child>
</template><script>data(){return{msg:"parent transfer value to children"}},provide():{return{msgProvideOfThis:this}}
</script>

// 子组件<template><h1>父组件传来的数据{{msgProvideOfThis.msg}}</h1>
</template><script>data(){return{childData:""}}inject: ['msgProvideOfThis']
</script>

5. EvenBus总线传值

// main.js
Vue.prototype.$EventBus = new Vue()

// 以上面的代码为例：
// 父组件
<template><child></child><button @click="btnclick"></button>
</template><script>data(){return{msg:"parent transfer value to children"}},methods:{btnclick(){this.$eventBus.$emit('eventName', this.msg)}}
</script>

// 子组件<template><h1>父组件传来的数据{{childData}}</h1>
</template><script>data(){return{childData:""}}mounted(){this.$eventBus.$on('eventName', (param)=>{this.childData = param})}
</script>

this.$eventBus.$off('eventName'); 移除事件

6. Vuex
   这个看官网吧

vue父组件传递给子组件，子组件watch的问题

为啥用watch? 子组件刷新的速度，快于父组件传值的速度

用watch需要注意的两点：

1. 子组件中watch第一次中监听不到

加上参数immediate: true
watch第一次是不会监听值的变化的，只有在值变化时才会触发。如果想一上来就监听，使用immediate: true。

2. 对象层级很深，监听不到

加上参数deep:true
深度监听