vue父子模板傳值問題解決方法案例分析
阿新 • • 發佈：2020-02-27
本文例項講述了vue父子模板傳值問題解決方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <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",components : {
three
},methods:{
dede (i){
this.$emit("del",template : `<div>
<three @del = "dede" :data = "data.title" :ide = "ide"></three>
</div>`
};
//父模板
let one = {
data(){
return {
newsData:[
{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>
執行結果：
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
希望本文所述對大家vue.js程式設計有所幫助。