组件通讯

父子组件通讯

父向子：通过 props 子向父：通过 $emit

• 父组件

<template>
	<div id="parent">
        <Child msg="父传给子的数据" 
               @getChildData="handleChildData"
        ></Child>
    </div>
</template>
<script>
import Child form './child'
export default{
    components: { Child },
    methods: {
        handleChildData(data){
            console.log(data) // 子传给父的数据
        }
    }
}
</script>

• 子组件

<template>
	<div id="child">
        <button @click="toParent">传数据给父组件</button>
    </div>
</template>
<script>
export default{
//  props:{
//      msg: {
//          type: String,
//          default: function(){}
//      }
//  }
    props: ['msg'], // 接受父组件传过来的数据
    data() {
		return {
            data: '子传给父的数据'
        }
    },
    methods: {
        toParent(){
            // 传给父组件的数据，父组件通过监听getChildData方法获得数据
            this.$emit("getChildData", this.data); 
        }
    }
}
</script>

父可以通过 ref 获取子组件的数据和方法

<template>
	<div id="parent">
        <Child ref="child"></Child>
    </div>
</template>
<script>
import Child form './child'
export default{
    components: { Child },
    mounted() {
		console.log(this.$refs.child.data) // '子传给父的数据'
    }
}
</script>

祖先元素和孙子元素

在祖先组件定义provide属性，返回传递的值

provide() {
    return {
      foo: 'foo'
    }
}

在后代组件通过inject接收组件传递过来的值

inject:['foo']

不相关组件

• 新建一个 event.js

import Vue from 'vue'
// new Vue() 具备让自定义事件
export default new Vue()

• 组件1

<template>
	<div id="person1">
        <button @click="sendData">传数据给 person2</button>
    </div>
</template>
<script>
import event form './event.js'
export default{
	methods: {
        sendData(){
            /**
            	param1: 自定义事件的名称
            	param2：传递的数据
            **/
            event.$emit('contact', '这是 person1 传给 person2 的数据')
        }
    }
}
</script>

• 组件2

<template>
	<div id="person2"></div>
</template>
<script>
import event form './event.js'
export default{
	methods: {
        getData(data){
            console.log(data) // 这是 person1 传给 person2 的数据
        }
    },
    mounted(){
        /**
        	param1：自定义事件的名称
        	param2：接受自定义事件的函数
        **/
        event.$on('contact', this.getData)
    },
    beforeDestroy(){
        // 销毁前一定要解绑，不然会造成内存泄漏！！！
        event.$off('contact')
    }
}
</script>

Vue.observable

传入一个对象，让对象变成响应式

创建一个 js 文件

import Vue from 'vue
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
    name: 'kingmusi',
    'age': 23
})
// 创建对应的方法
export let mutations = {
    changeName(name) {
        state.name = name
    },
    setAge(age) {
        state.age = age
    }
}

在vue文件中直接使用即可

<template>
    <div>
        姓名：{{ name }}
        年龄：{{ age }}
        <button @click="changeName('musi')">改变姓名</button>
        <button @click="setAge(18)">改变年龄</button>
    </div>
</template>

<script>
import { state, mutations } from '@/store
export default {
    // 在计算属性中拿到值
    computed: {
        name() {
            return state.name
        },
        age() {
            return state.age
        }
    },
    // 调用mutations里面的方法，更新数据
    methods: {
        changeName: mutations.changeName,
        setAge: mutations.setAge
    }
}
</script>

vuex