快捷導航

vue給組件傳遞不同的值方法

更新時間：2018年09月29日 12:15:33 作者：馬優(yōu)晨

今天小編就為大家分享一篇vue給組件傳遞不同的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

這里講解一下Vue 官網(wǎng)的一個實例，Vue將數(shù)據(jù)遍歷傳遞給多個組件，這個是我們實際開發(fā)中常做的事情。一般大型應(yīng)用都是使用組件搭建起來的，我們需要給組件傳遞不同的值，來實現(xiàn)不同的展現(xiàn)，實現(xiàn)代碼的復(fù)用。

<!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(){
 //全局創(chuàng)建一個Vue組件
 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
 })

 //創(chuàng)建一個vue實例
 var app7 = new Vue({
  el: '#app',
  data: {
   groceryList: [
    { id: 0, text: '蔬菜' },
    { id: 1, text: '奶酪' },
    { id: 2, text: '隨便其它什么人吃的東西' }
   ]
  }
 })
}

</script>
<body>
 <div id="app">
  <ol>
   <!-- 現(xiàn)在我們?yōu)槊總€ todo-item 提供 todo 對象todo 對象是變量，即其內(nèi)容可以是動態(tài)的。我們也需要為每個組件提供一個“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對象就可以使用。

創(chuàng)建一個vue實例

var app7 = new Vue({
  el: '#app',
  data: {
   groceryList: [
    { id: 0, text: '蔬菜' },
    { id: 1, text: '奶酪' },
    { id: 2, text: '隨便其它什么人吃的東西' }
   ]
  }
 })

全局創(chuàng)建一個Vue組件

 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
 })

通過Vue的實例給組件賦不同的值（通過bind綁定值到一個變量上，子組件通過props接受傳入的這個變量值）

<div id="app">
  <ol>
   <!-- 現(xiàn)在我們?yōu)槊總€ todo-item 提供 todo 對象todo 對象是變量，即其內(nèi)容可以是動態(tài)的。我們也需要為每個組件提供一個“key”。-->
   <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </ol>
 </div>

以上這篇vue給組件傳遞不同的值方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: