【老司機帶你飛】vue.js腳手架（五）

組件傳值props

App.vue

<template>
  <div id="app">
    <User v-bind:users="users"></User>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      users:[
        {username:"張三",age:28,sex:"男"},
        {username:"李四",age:29,sex:"女"},
        {username:"王五",age:30,sex:"男"},
        {username:"趙六",age:31,sex:"女"},
      ]
    }
  }
}
</script>
<style scoped>
</style>

User.vue

<template>
    <div class="user">
      <ul>
        <li v-for="user in users">{{user.username}}--{{user.age}}--{{user.sex}}</li>
      </ul>
    </div>
</template>
<script>
    export default {
      props:["users"],
        name: "User",
    }
</script>
<style scoped>
</style>

注意：這個例子是傳遞的引用類型數據（數組或對象），當子組件中改變數據的值，所有調用都會被改變，如果傳遞的是值類型，則只會改變當前組件內容

App.vue

<template>
  <div id="app">
    <User v-bind:users="users" v-bind:title="title"></User>
    <User v-bind:users="users" v-bind:title="title"></User>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      title:"易動學院",
      users:[
        {username:"張三",age:28,sex:"男"},
        {username:"李四",age:29,sex:"女"},
        {username:"王五",age:30,sex:"男"},
        {username:"趙六",age:31,sex:"女"},
      ]
    }
  }
}
</script>
<style scoped>
</style>

User.vue

<template>
    <div class="user">
      <h1>{{title}}</h1>
      <ul>
        <li v-for="user in users">{{user.username}}--{{user.age}}--{{user.sex}}</li>
      </ul>
      <button @click="deluser">刪除</button>
      <button @click="changeTitle">修改標題</button>
    </div>
</template>
<script>
    export default {
      props:["users","title"],
        name: "User",
      methods:{
        deluser:function () {
          this.users.pop();
        },
        changeTitle:function () {
          this.title = "vue真好玩"
        }
      }
    }
</script>
<style scoped>
</style>

上例可以測試出：如果組件傳值傳遞的是引用類型數據，一處改變，所有都變；如果是基本類型數據，則只改變本組件數據

QQ：732005030
掃碼加微信