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