Vue實(shí)現(xiàn)的父組件向子組件傳值功能示例
更新時(shí)間：2019年01月19日 14:09:33 作者：黎成訶月
這篇文章主要介紹了Vue實(shí)現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實(shí)例形式簡單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Vue實(shí)現(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>'
//需要有一個(gè)根元素標(biāo)簽包含子組件循環(huán)，vue react都要把東西變成一個(gè)塊才能循環(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代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁面組件不更新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
keepalive?是?Vue?內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說說你對(duì)Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)左右滑動(dòng)效果實(shí)例代碼
左右滾動(dòng)的效果,在日常開發(fā)中比較常見，這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)左右滑動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2021-05-05
在Vue中使用Bootstrap是常見的前端開發(fā)實(shí)踐之一,結(jié)合了Vue的響應(yīng)式數(shù)據(jù)綁定與Bootstrap的UI組件和布局系統(tǒng),能夠快速實(shí)現(xiàn)現(xiàn)代化的網(wǎng)頁應(yīng)用,本文將詳細(xì)介紹如何在Vue中使用Bootstrap,從安裝到高級(jí)使用,涵蓋了各種常見的開發(fā)場(chǎng)景和技巧,需要的朋友可以參考下2024-12-12
本篇文章主要介紹了vue 掛載路由到頭部導(dǎo)航的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了詳解Vue項(xiàng)目部署遇到的問題及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
antd+vue實(shí)現(xiàn)動(dòng)態(tài)驗(yàn)證循環(huán)屬性表單的思路
今天通過本文給大家分享antd+vue實(shí)現(xiàn)動(dòng)態(tài)驗(yàn)證循環(huán)屬性表單的思路，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實(shí)踐可能會(huì)有所不同,下面就跟隨小編一起來了解一下吧2024-04-04
Vue Element-ui表單校驗(yàn)規(guī)則實(shí)現(xiàn)
Element-ui表單校驗(yàn)規(guī)則，使得錯(cuò)誤提示可以直接在form-item下面顯示，無需彈出框，感興趣的小伙伴們可以參考一下2021-07-07
vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04