vue 父子組件數(shù)據(jù)互相監(jiān)聽問題

父組件有個(gè)input文本框 子組件也是很多input框 這是效果圖:

嗯想實(shí)現(xiàn)的功能是:

我再父文本框里輸入: ?get=1&name=2&name=3能自動(dòng)在子組件里生成數(shù)據(jù)

在子文本框里輸入 數(shù)據(jù)能自動(dòng)填充到父文本框里

下面代碼是簡(jiǎn)化版本:

父組件

<template>

<input type="text" v-model = "requestUrl">

<component :is = "view" :requestUrl = "requestUrl" @queryString = "queryString"></component>

</template>

<script>
//利用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換
import formView from './form';
import queryView from './query';
import jsonView from './json';

export default {
   components: {
        formView,
        jsonView,
        queryView,
    },
    data()
    {
        return {
            view: "formView",     //默認(rèn)組件
            viewIndex:0,         //組件索引
            requestUrl: "",      //接口地址
            //選項(xiàng)卡
            tab: [{
                "name": "Form",
                "view": "formView",
                //表示form下面的二級(jí)選項(xiàng)卡
                "options": [{
                    "name": "Form",
                    "view": "formView"
                },{
                    "name": "JSON",
                    "view": "jsonView",
                }, {
                    "name": "XML",
                    "view": "xmlView"
                }]

            }, {
                "name": "Query",
                "view": "queryView",

            }],
        }
    },
    methods: {
        //接受query子組件拋出的事件
        queryString(data)
        {
            var params = '?';

            for(var i = 0; i < data.length; i++) {

                if($.trim(data[i].value)) {

                    params += data[i].key + '=' + data[i].value + '&';

                } else {

                    params += data[i].key + '&';

                }
            }
            this.requestUrl = this.requestUrl.replace(/\?.+/, '') + params
        }
    }
}
</script>

query子組件:

<template>
    <div class = "query">
        <table v-if="data">
            <tr v-for = "val,index in data">
                <td>
                    <input :checked="val.is" type = "checkbox">
                </td>
                <td>
                    <input v-model = "val.key"></input>
                </td>
                
                <td>
                    <input v-model = "val.value"></input>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    props:["requestUrl"],
    data()
    {
        return {
            data:[],
            
        }
    },
    
    watch: {
        requestUrl()
        {
            var url = this.requestUrl.split('?');

            var data = [];

            if(url.length > 1) {

                url = url[1].split('&');

                for(var i = 0; i < url.length; i++) {

                    // var data =
                    var u = url[i].split('=');

                    if(u[1] == undefined) {

                        u[1] = '';

                    }

                    data.push({
                        "is": 1,
                        "key": u[0],
                        "value": u[1]
                    });
                }
            }

            this.data = data;
        }
    },
    updated()
    {
        //計(jì)算data數(shù)據(jù)變化， 收集key不為空且is=1的數(shù)據(jù) 傳遞給父組件
        var data = [];

        for(var i = 0; i < this.data.length; i++) {

            if($.trim(this.data[i].key) && this.data[i].is) {

                data.push(this.data[i]);
            }
        }

        this.$emit('queryString', data);
    },
}
</script>

我說下我的邏輯(看對(duì)不對(duì))
1、因?yàn)轫撁嬗泻芏噙x項(xiàng)卡 我采用的是動(dòng)態(tài)組件方式加載的選項(xiàng)卡 每個(gè)子組件的data都是子組件自己處理的并不是父組件傳過來的。我再子組件內(nèi)部監(jiān)聽數(shù)據(jù)變化updated過濾一些數(shù)據(jù)后$emit給父組件的querySting方法，父組件的queryStirng方法接受到之后處理一些邏輯 修改requestUrl (實(shí)現(xiàn)了子組件的input發(fā)生變化父組件的input框也跟著發(fā)生變化)

2、query子組件接受父組件傳過來的requestUrl值 然后在子組件內(nèi)部watch監(jiān)聽requestUrl變化進(jìn)行修改data(實(shí)現(xiàn)父組件url框發(fā)生變化 子組件內(nèi)部的data也跟著變化。)

很辛運(yùn)的是這樣并沒有發(fā)生死循環(huán)

碰到的問題是: 我在父組件url框進(jìn)行編輯的時(shí)候

=號(hào)以及&號(hào)沒辦法輸入 最終都會(huì)被queryString方法重新處理一遍

        {
            var params = '?';

            for(var i = 0; i < data.length; i++) {

                if($.trim(data[i].value)) {

                    params += data[i].key + '=' + data[i].value + '&';

                } else {

                    params += data[i].key + '&';

                }
            }
            this.requestUrl = this.requestUrl.replace(/\?.+/, '') + params
        }

我不太清楚vue還有沒有更好的一種方式實(shí)現(xiàn)。