props传参问题

Question

根据文档自己写了一个测试，发现跟文档说的不一样。props定义的变量无法使用this.var获取

<div id="zj">
    <input type="text" v-model='test'>
    <zj-test2 :message='test'></zj-test2>
</div>

var zj=new Vue({
    el:'#zj',
    data:{
        test:''

    },
    methods:{
        
    },
    components:{//注册局部组件
        'zj-test2':{
            props:['message'],
            data:function(){
                return {
                    count:this.message
                };
            },
            template:'<button>{{count}}--{{message}}</button>'
        }
    }
});

页面效果：通过改变输入框中的值改变test，进而改变message和count

count一直无法获取到值,另外我再问下什么是父组件什么是子组件？

Answer 1

注意关键字“初始化”。

也就是说只是给 count 一个初值，并不是绑定起来，message 给它的初值是 test 也就是 ''。

想要绑定的效果用 computed

'zj-test2':{
    props:['message'],
    computed: {
        count: function () {
          return this.message
        }
    },
    template:'<button>{{count}}--{{message}}</button>'
}

Answer 2

有报错吗?
按道理的话.
count默认等于message.而message初始值为空字符串,因为父组件的test初始值也是空.所以count一直是空的.

Answer 3

count不能用这种方式绑定this.message
你的写法是给count初始值为this.message 但这样并没有建立绑定关系
尝试使用watch进行绑定