<!DOCTYPE html><html><head> <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>拆成另外个组件，并实现和ele-input组件的通信，参考官方文档https://cn.vuejs.org/v2/guide/components.html#非父子组件通信
2 回答
12345678_0001
TA贡献1802条经验 获得超5个赞
先把 li 抽成组件 这个应该不难
第二部 组件通信
1 li组件中$emit一个事件
2 父组件 on接受事件 触发父组件中的方法
3 父组件触发的方法中改变传给ele-input组件的数据
这个是我的思路，也不知道可不可行
添加回答
举报
0/150
提交
取消