同樣是用組件嵌套：
<div id="app">
<you-mother></you-mother>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('you-mother',{
template:`
<div>
<input type="text" v-model="msg">
<button @click="str">點(diǎn)擊</button>
<you-child v-bind:biglist="list"></you-child>
</div>
`,
data:function(){
return{
list:["吃飯","睡覺","打豆豆"],
msg:""
}
},
methods:{
str:function(){
this.list.push(this.msg);
this.msg=""
}
}
});
Vue.component('you-child',{
props:["biglist"],
template:`
<ol>
<li v-for="(value,index) in biglist">{{value}} <button @click="add(index)">刪除</button></li>
</ol>
`,
methods:{
add:function(ind){//ind 形參
this.biglist.splice(ind,1)
}
}
});
new Vue({
el:"#app"
});
</script>
結(jié)果如下：
QQ截圖20180920112501.png
