How to split parent-child components into non-parent-child components and realize communication in vue

<!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:"-sharpitany",
        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>

Please put < li class= "form-item" v) in Arr in the above code

(vJournal k) in Arr ": key=" k "> {{v}

)

        ele-inputhttps://cn.vuejs.org/v2/guide/components.html-sharp

<!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>  <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>