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

Posted 安之ccy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue父向子传值/传引用:props相关的知识,希望对你有一定的参考价值。

父向子传值/引用:
基本使用:
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的传递,确实传的是值

以上是关于Vue父向子传值/传引用:props的主要内容,如果未能解决你的问题,请参考以下文章

子页面向父页面传值

微信小程序父子组件之间传值

Vue2.0的三种常用传值方式父传子子传父非父子组件传值

vue父组件向子组件传值

vue组件传值大全详细版

visual c++ 中 怎样把子窗口传值到父窗口?