vue.js - 怎么读取component组件里面的动态数据？

问题描述

问 题

 <div class="form-group" id="22">
            <control-label label="姓名:"></control-label>
            <span  v-for="modal in addInputs"><ui-input></ui-input></span>
            <ui-button  id="add-input" label="新增input"  v-on:click="addInput()"></ui-button>
            <ui-button  id="remove-input" label="移除input"  v-on:click="removeInput()"></ui-button>
        </div>

        <div class="form-group">
            <ui-button  id="remove-input" label="保存"  v-on:click="save()"></ui-button>
        </div>
    
    js:
     //定义模块
    var label=Vue.extend({
        props:{
            label:''
        },
        template:'<label class="control-label" v-text="label"></label>'
    });
    var input=Vue.extend({
        template:'<input type="text" placeholder="请输入" v-model="msg"/>'
    });
    var button=Vue.extend({
        // props:['idName','checkText'],
        props:{
            id:'',
            label:''
        },
        template:'<button type="button" class="btn btn-primary" v-bind:id="id" v-text="label"></button>'
    });

    Vue.component('control-label',label);
    Vue.component('ui-input',input);
    Vue.component('ui-button',button);

    var form=new Vue({
        el:'body',
        data: {
            msg:'',
            addInputs: [{
                modal: ""
            }] ,
            select:{
                text: ''
            },selects: ''

        },
        methods: {
            save: function () {
                alert('欢迎' + this.msg);
            },
            addInput:function(){
                this.addInputs.push({
                    modal: ""
                })
            },
            removeInput:function(index) {
                this.addInputs.splice(index, 1)
            }
        }
    })
    
    
    
    其中这边的this.msg怎么读取不到输入框的动态数据呢

save: function () {

            alert('欢迎' + this.msg);
        }

解决方案

子组件v-model绑定的数据是子组件的data...

还有不用把一个input也搞成一个子组件。。。

如果非要你那样弄，你这样改吧：

var input=Vue.extend({
    props: {
        msg: String
    }
    template:'<input type="text" placeholder="请输入" v-model="msg"/>'
    });

然后<ui-input></ui-input>变成：<ui-input :msg.sync="msg"></ui-input>

具体请看文档http://cn.vuejs.org/guide/com...

这篇关于vue.js - 怎么读取component组件里面的动态数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！