Vue父向子传值/传引用：props

Posted 2021-07-17 安之ccy

父向子传值/引用：
基本使用：
1.在父组件上定义了某个数据，使用bind指令传给子组件（简单字符串可以直接传字符串本身）
2.子组件用props接收

传值/传引用（深浅拷贝）：
1.如果传给了多个子组件，并且传的是值，其中一个组件修改了该值，不会影响其他组件得到的值
2.如果传的是引用（传址），有一个组件修改了这个数据，所有组件得到的这个数据都会被改变
3.可以用另外的变量存储接收的数据，保存在data中，并且对源数据进行深拷贝，这样不论源数据如何修改，均不会影响到本组件所需要的数据

demo：
父组件：向子组件Header传msg和title；向子组件User传递users；向子组件Footer传递title；其中，传msg、title为直接传递值，传递users传的是引用
为显示传引用的特点，使用两个User组件

<template>
  <div id="app">
    <app-header msg="this is a demo" v-bind:title="title"></app-header>
    <h1>{{title1}}</h1>
    <user v-bind:users="users"></user>
    <user v-bind:users="users"></user>
    <app-footer v-bind:title="title"></app-footer>
  </div>
</template>

<script>

import User from "./components/User"
import Header from "./components/Header"
import Footer from "./components/Footer"

export default {
  name: 'App',
  data:function(){
    return {
      title1:"ccy",
      'users':[
            {name:"ccy1",age:18,show:false},
            {name:"ccy2",age:19,show:false},
            {name:"ccy3",age:20,show:false}
            ],
      title:"父向子传值，string"
    }
    
  },
  components:{
    User,
    "app-header":Header,
    "app-footer":Footer
  } // 局部注册
}
</script>

子组件User接收users，并将其深拷贝后保存在data中，以变量名myUsers存储；
遍历myUsers，逐一拼接在li上；
创建一个按钮，点击该按钮，删除最后一个li

<template>
  <div class="user">
    <h1>this is User component</h1>
    <ul>
        <li v-for="user in myUsers" :key="user.index" @click="user.show=!user.show">
          <h2>{{user.name}}</h2>
          <p v-show="user.show">{{user.age}}</p>
        </li>
    </ul>
    <button v-on:click="deleteUser">删除</button>
  </div>
</template>

<script>
export default {
  name: 'user',
  props:{
    "users":{
      type:Array,
      require:true
    }
  },
  data:function(){
      return {
        "myUsers":JSON.parse(JSON.stringify(this.users))
      }
  },
  methods:{
    deleteUser:function(){
      this.myUsers.pop()
    }
  }
}
</script>

当点击第一个User组件的删除按钮时，该组件的最后一个li被删除，第二个User组件的最后一个li没有被删除
如果没有深拷贝到myUsers变量，点击任意一个User组件的删除按钮，这两个组件中的最后一个li都会被删除

子组件Header和Footer：
均接收值title并显示，定义一个事件，点击该组件，就修改title值
Header.vue：

<template>
  <div class="header">
    <header v-on:click="changeTitle">
        {{ msg }} {{title}}
    </header>

    
  </div>
</template>

<script>
export default {
  name: 'header',
  props: {
    msg: String,
    title:String
  },
  methods:{
      changeTitle:function(){
          this.title = "changeTitle now"
      }
  }
}
</script>

Footer.vue类似
点击Header，Header的title改变，Footer的title没有改变
说明title的传递，确实传的是值