當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue给组件传递不同的值

發布時間：2023/12/31 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue给组件传递不同的值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這里講解一下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 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接受傳入的這個變量值）

總結

以上是生活随笔為你收集整理的vue给组件传递不同的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

组件
Vue