demo地址
因为一些特殊事情,断更了一天,可耻......还是要继续学习!
引用传递
在上一篇文章的demo中,我们从父组件向子组件传递了一个数组.这里引出一个概念,在vue中,数组和对象传递都是引用传递.举个栗子,在myComponent组件中我们给它加上一个点击事件,来改变users的值:
<template>
<div class="myComponent">
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
<button @click="deleteUser">删除一个人</button>
</div>
</template>
<script>
export default
{
name: 'myComponent',
// props:["users"],
props:{
users:{
type : Array,
required : true
}
},
data(){
// noinspection JSAnnotator
return{
}
},
methods:{
deleteUser:function (){
this.users.pop();
}
}
}
</script>
这里给一个pop()函数来弹出最后一个user.
同时在app.vue中,我们再加上一个myComponent:
<template>
<div id="app">
<app-header v-bind:info="info"></app-header>
<myComponent v-bind:users="users"></myComponent>
<myComponent v-bind:users="users"></myComponent>
<app-footer v-bind:info="info"></app-footer>
</div>
</template>
然后会发现,当我们点击这个button之后,两个myComponent的值都会减少.这就能说明数组的传递是引用传递.
值传递
同理,我们可以去证明,凡是String,boolean,number类型的传递都是值传递.
这里贴一下header的代码,前提是header和footer都从app.vue传入了一个info字符串:
<template>
<header>
<h1>
{{title}},{{info}}
</h1>
<button @click="changeInfo">改变info</button>
</header>
</template>
<script>
export default
{
name: 'app-header',
props:{
info:{
type : String
}
},
data(){
// noinspection JSAnnotator
return{
title : '这是一个header'
}
},
methods:{
changeInfo:function (){
this.info = 'info 被改变了';
}
}
}
</script>
我们会发现,当我们点击button之后,header的info确实改变了,但是footer没有改变.这里就证明,此时字符串传递是值传递.
