Vue组件通信props, $emit

父组件向子组件传递   

场景： 

爸爸说：乖儿子；儿子显示父亲说的话

在父组件使用v-bind绑定属性，在子组件使用props接收

var sonNode = {
    props: ['fatherWords'],
    template: `<div>{{ fatherWords }}</div>`
};

var fatherNode = {
    template: `<div>我是爸爸<son :fatherWords='father'></son></div>`,
    data() {
        return {
            father: '乖儿子'
        }
    },
    components: {
        son: sonNode
    }
};

子组件向父组件传递

场景：

儿子说：爸爸，给钱！ 父亲显示儿子说的话

在子组件使用$emit(‘事件名’，参数)注册事件，并将需要传递的数据放入参数中,在父组件中触发事件，获取参数

var sonNode = {
    template: `<div>我是儿子</div>`,
    mounted() {
        this.$emit('showSonWords', '爸爸,给钱!')
    }
};

var fatherNode = {
    template: `<div>{{ this.sonWords }}<son @showSonWords="getSonWords"></son></div>`,
    data() {
        return {
            sonWords: ''
        }
    },
    components: {
        son: sonNode
    },
    methods: {
        getSonWords(sonWords) {
            console.log(456);
            this.sonWords = sonWords;
        }
    }
};