使用vue怎么給組件傳遞不同的值

發(fā)布時間：2021-02-19 16:51:18 來源：億速云閱讀：247 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)使用vue怎么給組件傳遞不同的值，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

<!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實(shí)例：父組件給子組件傳遞不同的值</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實(shí)例
 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，然后實(shí)例化Vue對象就可以使用。

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

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的實(shí)例給組件賦不同的值（通過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怎么給組件傳遞不同的值，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

使用vue怎么給組件傳遞不同的值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽