這里講解一下Vue 官網的一個實例，Vue將數據遍歷傳遞給多個組件，這個是我們實際開發中常做的事情。一般大型應用都是使用組件搭建起來的，我們需要給組件傳遞不同的值，來實現不同的展現，實現代碼的復用。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue實例：父組件給子組件傳遞不同的值</title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script></head><script>window.onload = function(){ //全局創建一個Vue組件 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) //創建一個vue實例 var app7 = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } })}</script><body> <div id="app"> <ol> <!-- 現在我們為每個 todo-item 提供 todo 對象todo 對象是變量，即其內容可以是動態的。我們也需要為每個組件提供一個“key”。--> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </div></body></html>代碼分析：
這里我直接使用了一個Vue的CDN，然后實例化Vue對象就可以使用。
創建一個vue實例
var app7 = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } })全局創建一個Vue組件
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' })通過Vue的實例給組件賦不同的值（通過bind綁定值到一個變量上，子組件通過props接受傳入的這個變量值）
<div id="app"> <ol> <!-- 現在我們為每個 todo-item 提供 todo 對象todo 對象是變量，即其內容可以是動態的。我們也需要為每個組件提供一個“key”。--> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </div>
以上這篇vue給組件傳遞不同的值方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
