<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <one></one> </div> </body> </html>
//引入vue <script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script>
<script> (function(){ //two 的子模板 let three = { props : ["data" , "ide"], methods: { del(i){ this.$emit("del",i) } }, template : `<div><h1>{{data}}</h1><h2>{{ide}}</h2> <span @click="del(ide)">X</span></div>` }; //one 的子模板 let two = { props : ["data" , "ide"], components : { three }, methods:{ dede (i){ this.$emit("del",i) } }, template : `<div> <three @del = "dede" :data = "data.title" :ide = "ide"></three> </div>` }; //父模板 let one = { data(){ return { newsData:[ {title:"新闻一"}, {title:"新闻一"}, {title:"新闻一"}, {title:"新闻一"} ] } }, components : { two }, methods:{ delete2(i){ this.newsData.splice(i,1); } }, template : `<div><h1>one1</h1><two @del = "delete2" :data = "n" ind = "index" v-for="(n,index) in newsData"></two></div>` }; let vm = new Vue({ el : "#app", components : { one } }) })() </script>
运行结果：
