Pass data to sub-components through Prop
The first step is in the parent component App.vue
<template>
<div id="app">
<Users :users="users"></Users>
</div>
</template>
<script>
import Users from './components/Users'
export default {
name: 'App',
data: function () {
return {
users: [
{id:1, name:'Henry'},
{id:2, name:'Tom'}
]
}
},
components: {
Users
}
}
</script>
Explanation: Pass the users in the data in the parent component: [] to the child component through v-bind:users = "users"
Subcomponent
<template>
<div id="app">
<span>通过import注册局部组件</span><br>
<span>{
{users[0].name}}</span>
</div>
</template>
<script>
export default {
name: 'users',
//props:['users'],
props: {
users: {
type: Array,
required: true
}
}
}
</script>
Explanation: The value passed from the parent component can be used directly <span>{ {users[0].name}}</span>
Prop type
Prop listed as a string array:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
List props in the form of objects. The names and values of these properties are their respective names and types:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
Recommend the second
Pass dynamic or static prop
Pass a static value to prop:
<blog-post title="My journey with Vue"></blog-post>
Prop can be dynamically assigned via v-bind, for example:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
Any type of value can be passed to a prop
Unidirectional data flow
The update of the parent prop will flow down to the child components, but the reverse will not work.
There are two common scenarios for trying to change a prop:
This prop is used to pass an initial value; this child component wants to use it as a local prop data. In this case, it is best to define a local data attribute and use this prop as its initial value
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
This prop is passed in as a primitive value and needs to be converted. In this case, it is best to use the value of this prop to define a calculated property:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
this.$emit (child to parent)
Subassembly
<template>
<button @click="showData(items)">
获取数据
</button>
</template>
<script>
export default {
name: 'tests',
data() {
return {
items:
{
'key':'content',
'label':'内容'
}
};
},
methods:{
showData: function(data) {
this.$emit('msg',data)
}
}
}
</script>
Parent component
<template>
<view>
<tests @msg="getData"></tests>
</view>
</template>
<script>
// 引入 IM 组件
import tests from '../../components/test.vue';
export default {
data() {
return {
datas:{},
};
},
methods: {
getData: function(data) {
console.log(data);
this.datas=data;
/* 获得items:
{
'key':'content',
'label':'内容'
} */
}
},
components:{
tests
}
};
</script>
<style></style>
this.$refs parent calls child component method
Subassembly
<template>
<view>
</view>
</template>
<script>
export default {
name: 'tests',
data() {
return {
items:[
{
'key':'content',
'label':'内容'
}
]
};
},
methods:{
showData: function() {
console.log(this.items);
}
}
}
</script>
<style>
</style>Parent component
<template>
<view>
<tests ref="test"> </tests>
//调用子组件的重点ref="test
<button @click="getData">获取数据</button>
</view>
</template>
<script>
import tests from '../../components/test.vue';
export default {
data() {
return {
datas:'',
};
},
methods: {
getData: function() {
this.$refs.test.showData();
//调用子组件的重点$refs.test
}
},
components:{
tests
}
};
</script>