溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用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怎么給組件傳遞不同的值，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
