javascript - vue2父组件怎么调用子组件的方法？

问题描述

问 题

我主要目的是当父组件传数据给子组件的时候，子组件会调用相应的方法。
我的想法是通过props向子组件传递数据，然后子组件watch这个数据，然后在watch里调用相应的方法。但是watch并没有生效。
请问这是什么原因而导致不生效，如果这个办法行不通又有什么办法可以实现我的要求？
考虑到系统相对比较简单，这里不打算用vuex

style:

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

#parent{
    border: 1px solid #999;
    text-align: center;
    width: 50%;
    margin: 100px auto;
}
.child{
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #d14;
}

html:

<div id="parent">
    <br/>
    <p @click="test">parent's msg: <code>{{ msg.text }}</code></p>
    <kbd>input:</kbd> <input v-model="msg.text">
    <br/>
    <br/>
    <span>child:</span>
    <child :msg="msg" class="child"></child>
    <br/>
    <br/>
</div>

javascript

Vue.component('child', {
    // 声明 props
    props: ['msg'],
    template: '<span  @click="test">{{ msg.text }}</span>',
    methods: {
        test: function() {
            //console.log(this.msg.text);
            this.msg.text += '1';
        }
    },
    watch: {
        msg: function() {
            //就是这里
            console.log(1)
        }
    }
});
new Vue({
    el: '#parent',
    data: {
        msg: {
            text: 'msg from parent'
        }
    },
    methods: {
        test: function() {
            this.msg.text += '1';
        }
    }
});

求解疑！

解决方案

父组件传进来的props，子组件里不能改，不是双向的，只能在父组件里改，vuejs就是这么设计的。
你要想通知父级，只能通过自定义事件，$emit 触发事件，父组件监听这个事件。

这篇关于javascript - vue2父组件怎么调用子组件的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！