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的主要内容,如果未能解决你的问题,请参考以下文章