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