vue.js - props传参问题

问题描述

问 题

根据文档自己写了一个测试，发现跟文档说的不一样。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一直无法获取到值,另外我再问下什么是父组件什么是子组件？

解决方案

注意关键字初始化。

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

想要绑定的效果用 computed

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

这篇关于vue.js - props传参问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！