Vue子组件到父组件通讯

子组件到父组件通讯

    
    

Vue.component('msg-component', {
    props: ['post'],
    data() {
        return {

        }
    },
    template: '{{post}}',
    methods: {
        changeFontSize() {
            // 调用父组件方法
            this.$emit('change-font-size', 0.1)
        }
    }
})
var app = new Vue({
    el: "#app",
    data: {
        post: "Hello Vue",
        fontSize: 1
    },
    methods: {
        // 子组件传递的值将会作为第一个参数传入这个方法
        changeFontSize(val) {
            this.fontSize += val;
        }
    }
})

• 在子组件调用 DOM 处定义子组件访问方法和父组件调用方法，声明方式为@子组件回掉方法="父组件调用方法"
• 在子组件内使用 $emit 方法调用子组件回掉函数
• 父组件中定义 父组件调用方法

自定义事件用于创建支持 v-model 的自定义输入组件

Vue.component('custom-input', {
    props: ['value'],
    template: `
        
    `
})
var app = new Vue({
    el: "#app",
    data: {
        post: "Hello Vue",
        fontSize: 1,
        searchText: ""
    },
    methods: {
        // 子组件传递的值将会作为第一个参数传入这个方法
        changeFontSize(val) {
            this.fontSize += val;
        }
    }
})

为了让它正常工作，这个组件内的 必须：

• 将其 value 特性绑定到一个名叫 value 的 prop 上
• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

注意 ⚠️

• 跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
• 因此推荐始终使用 kebab-case 的事件名

将原生事件绑定到组件

我是元素
Vue.component('my-comp', {
    template: '
我是组件
'
});
var app = new Vue({
    el: "#app",
    data: {
        lovingVue: false
    },
    methods: {
        doThis: function () {
            console.log('click');
        }
    }
})

点击[我是组件][我是元素]都可以触发 doThis 函数，如果组件 click 事件去掉 native 修饰将不会触发 doThis 事件，因为 Vue 把它当做组件的自定义事件了，而组件的自定义事件的触发需要使用 this.$emit('click')。

.sync 修饰符实现双向绑定

Open
    Vue.component('text-document', {
    props: ['show'],
    data() {
        return {}
    },
    template: '
Hello Vue
Close
',
    methods: {
        closeShow() {
            this.$emit("update:show", false)
        }
    }
})
var app = new Vue({
    el: "#app",
    data: {
        lovingVue: false,
        doc: {
            show: true
        }
    },
    methods: {
        doThis: function () {
            console.log('click');
        },
        openShow() {
            this.doc.show = true
        }
    }
})

使用 sync 和 update 语法可以时子组件修改 prop 传入的值，同时修改父组件的值，当然使用$emit 也可以实现相同的效果，不过使用 sync 和 update 可以省去在父组件中定义响应方法，在一些比较复杂的场景中，使用 这种双向绑定更加方便。