【轻松学vue】vue.js脚手架（五）组件传值props

组件传值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
扫码加微信