Vue 父子组件的通信

关键词： props slot emit

父组件向子组件传递数据

关键词： props
准备工作：

1. 父组件

var App = {
    componnets: {
        son: Son
    },
    template: `<div><son></son></div>`,
    data() {
        return {
            obj: 'abc'
        }
    }
}

2. 子组件

var Son = {
    template: `<div><h1>This is Son!<h1></div>`
}

3.子组件需要父组件的数据 obj
(1)绑定obj:

var App = {
    componnets: {
        son: Son
    },
    template: `<div><son :obj="obj"></son></div>`,
    data() {
        return {
            obj: 'abc'
        }
    }
}

(2)子组件用props接收obj,子组件接收后就可以通过this.obj使用：

var Son = {
    template: `<div><h1>This is Son!<h1></div>`,
    prpos:{
        obj: Object
    }
}

• 子组件在接收父组件的数据时，可以指定类型验证
• 在绑定数据时，不要使用驼峰命名，因为在HTML中是不区分大小写的，推荐使用kebab-case写法
• 一般来说，如果子组件需要操作props中的值，需要将props中的值赋值给本地定义的属性
• 在子组件使用watch监听props中的数组，不能对数组进行改变，否则，vue会发出警告产生无限更新循环的问题。

父组件向子组件传递dom

关键词：slot 使用slot内置组件可以实现父组件向子组件传递dom。 示例：

var Son = {
    template: `<div><h1><slot></slot></h1></div>`,
    props: {
        obj：Object // 验证类型
    }
}
// 父组件
var App = {
    componnets: { //声明要用的组件
    son: Son  //key是组件名，value是组件对象
    }
    template: '<div><son :obj="obj"><p>This is slot!</p></son></div>', //入口组件
    data() {
        return {
                obj: 'abc'
        }
    }
}

具名插槽：有的情况下可能需要多个插槽，则可以使用slot属性的name属性。

子组件调用父组件的方法

关键词：this.$emit 子组件使用this.$emit调用父组件的方法，同时可以根据需要传递对应的参数。 示例：

var Son = {
    template: `<div @click="sendMessage">{{ msg }}</div>`,
    props: {
        obj：Object // 验证类型
    },
    data () {
        return {
            msg: "send message"
        }
    },
    methods: {
        sendMessage () {
            this.$emit('showMessage', this.msg)
            // send message
        }
    }
}
// 父组件
var App = {
    componnets: { //声明要用的组件
    son: Son  //key是组件名，value是组件对象
    }
    template: '<div><son :obj="obj" @showMessage="showMessage"></son></div>', //入口组件
    data() {
        return {
                obj: 'abc'
        }
    },
    methods: {
        showMessage (params) {
            console.log(params)
        }
    }
}

步骤：

1. 在父组件中绑定showMessage方法：@showMessage="showMessage"
2. 在子组件中使用this.$emit('showMessage',this.msg)调用父组件的方法，其中第一个参数为方法名，后面的参数表示子组件向父组件传递的参数。