vue父子模板傳值問題解決方法案例分析
更新時間：2020年02月26日 08:52:55 作者：巴啦啦小能量
這篇文章主要介紹了vue父子模板傳值問題解決方法,結合案例形式分析了vue.js父子模板傳值問題相關實現方法與具體操作步驟,需要的朋友可以參考下
本文實例講述了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" , "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>
運行結果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了vscode vue 文件模板的配置方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue組件在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。2022-12-12
Web應用程序中資源分頁不僅對性能很有幫助，而且從用戶體驗的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動態(tài)和可用的分頁組件2022-12-12
這篇文章主要介紹了vue之input輸入框防抖debounce函數的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細介紹一下如何在Vue3中實現自定義指令，文中的示例代碼講解詳細，具有一定的借鑒價值，需要的同學可以參考一下2022-07-07
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細的代碼講解,需要的朋友可以參考下2023-11-11
本文主要介紹了element step組件在另一側加時間軸顯示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了Nuxt之vue服務端渲染，NUXT集成了利用Vue開發(fā)服務端渲染的應用所需要的各種配置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
解決Vue3?echarts?v-show無法重新渲染的問題
這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
當針對不同客戶需要提供不同的圖標時,頁面其他圖標好替換,但是網頁圖標就不太一樣了,下面這篇文章主要給大家介紹了關于vue中修改瀏覽器圖標和名字的幾種方式,需要的朋友可以參考下2022-10-10