Vue實現(xiàn)的父組件向子組件傳值功能示例
更新時間：2019年01月19日 14:09:33 作者：黎成訶月
這篇文章主要介紹了Vue實現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實例形式簡單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Vue實現(xiàn)的父組件向子組件傳值功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 父組件向子組件傳值</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 把字符串傳給子組件 -->
<ol>
<todo-item v-for="item in sites" v-bind:item="item"></todo-item>
</ol>
<!-- 把數(shù)組的值傳給子組件 -->
<myname :name="name"></myname>
</div>
<script>
Vue.component('todo-item', {
// props: ['item'],
props: {
item : String,
},
template: '<li>{{ item.text }}</li>'
})
Vue.component('myname', {
props: ['name'],
// props: {
// name : Array,
// },
template: '<div><li v-for="(item,index) in name">{{ item.text }}-{{index+1}}</li></div>'
//需要有一個根元素標(biāo)簽包含子組件循環(huán)，vue react都要把東西變成一個塊才能循環(huán)出來
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'jb51' },
{ text: 'Google' },
{ text: 'Taobao' }
],
name: [
{ text: 'lee' },
{ text: 'jane' },
{ text: 'nike' }
]
}
})
</script>
</body>
</html>
這里使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了vue子組件created方法不執(zhí)行問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue-admin和后端(flask)分離結(jié)合的例子
本篇文章主要介紹了詳解vue-admin和后端(flask)分離結(jié)合的例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vite+vue3+ts項目中提示無法找到模塊的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法
這篇文章主要介紹了vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
vue 使用element-ui中的Notification自定義按鈕并實現(xiàn)關(guān)閉功能及如何處理多個通知
這篇文章主要介紹了vue 使用element-ui中的Notification自定義按鈕并實現(xiàn)關(guān)閉功能及如何處理多個通知，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名
這篇文章主要介紹了vue項目中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名,使用npm run build --xxx，根據(jù)傳遞參數(shù)xxx來判定不同的環(huán)境，給出不同的域名配置，具體內(nèi)容詳情大家參考下本文2018-03-03
Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
這篇文章主要介紹了Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-11-11
淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02