在vue中如何對父子組件拆分成非父子組件并實現(xiàn)通信

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="itany">
        <ul class="form-ul">
            <li class="form-item">
                <h4 class="form-title">郵件主題</h4>
                <ele-input v-on:name="handleList"></ele-input>
                <!-- <my-input :value="item" @input="val => {item = val}"></my-input>-->
                <i class="icon pen"></i>
            </li>
        </ul>
        <ul class="form-ul">
            <li class="form-item" v-for="(v,k) in Arr" :key="k">
                {{v}}
            </li>
        </ul>
    </div>

<script>
    Vue.component(
        'eleInput',{
                template: '<input type="text"  @input="pushArr" v-model="name" >\
                ',
                data: function(){
                        return{
                            name:""
                        }
                    },
                methods:{
                    pushArr: function () {
                        this.$emit('name',{item:this.name});
                    }
                }

            }
    )

    var vm=new Vue({
        el:"#itany",
        data:function(){
            return{
                Arr:[],
                Arrpost:['大華','小華', 'alex', 'mark']
            };
        },
        methods:{
            handleList: function (payload) {
                var temp=[];
                this.Arrpost.forEach(
                        function(val){
                            if(val.indexOf(payload.item)!=-1&&(payload.item!="")){
                                temp.push(val);
                            }
                        }
                );
                this.Arr=temp;
            }
        }
    })


</script>
</body>
</html>

請把上面的代碼中 <li class="form-item" v-for="(v,k) in Arr" :key="k">{{v}}</li>

        拆成另外個組件，并實現(xiàn)和ele-input組件的通信，參考官方文檔https://cn.vuejs.org/v2/guide/components.html#非父子組件通信

回答

編輯回答

小眼睛

先把 li 抽成組件這個應(yīng)該不難
第二部組件通信
1 li組件中$emit一個事件
2 父組件 on接受事件觸發(fā)父組件中的方法
3 父組件觸發(fā)的方法中改變傳給ele-input組件的數(shù)據(jù)
這個是我的思路，也不知道可不可行

2017年6月28日 17:57

編輯回答

夢若殤

解決了，兄弟組件傳值的方法如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="itany">
        <ul class="form-ul">
            <li class="form-item">
                <h4 class="form-title">郵件主題</h4>
                <ele-input ></ele-input>
                <!-- <my-input :value="item" @input="val => {item = val}"></my-input>-->
                <i class="icon pen"></i>
            </li>
        </ul>
        <ele-list></ele-list>
    </div>

    <script>
        //空的vue實例作為組件通信通道
        var bus=new Vue();
        var searchInput=Vue.extend({
                    template: '<input type="text"  @input="pushArr" v-model="name" >\
                ',
                    data: function(){
                        return{
                            name:""
                        }
                    },
                     mounted:function(){
                        bus.$on("pushName", function (value) {
                            this.name=value;
                        }.bind(this));
                    },
                    methods:{
                        pushArr: function () {
                            bus.$emit('handleList',{item:this.name});
                        }
                    }
                })

        var showList=Vue.extend({
                    template: '<ul class="form-item"><li class="form-item" v-for="(v,k) in Arr" :key="k" v-on:click="setName(v)">{{v}}</li></ul>\
                ',
                    data:function(){
                        return{
                            Arr:[]
                        }
                    },
                    props:["postArr"],
                    mounted: function(){
                            bus.$on("handleList", function (payload) {
                                var temp=[];
                                this.postArr.forEach(
                                        function(val){
                                            if(val.indexOf(payload.item)!=-1&&(payload.item!="")&&(payload.item!=val)){
                                                temp.push(val);
                                            }
                                        }
                                );
                                this.Arr=temp;
                            }.bind(this));
                     },
                    methods:{
                        setName:function(value){
                            this.Arr=[];
                            bus.$emit('pushName',value);
                        }
                    }
                })

        new searchInput({propsData:
        {
        }}).$mount("ele-input");

        new showList({propsData:
        {
            postArr:['大王a','王華', 'alex', 'mark']
        }}).$mount("ele-list");


    </script>
</body>
</html>

2017年3月25日 09:58