Write the directory title here
- 1. Parent components and child components
- 2. Parent component passes data to child component
-
- 1. Subcomponents
- 2. Parent component (App)
- 3. Implementation steps
-
- 1. Define props inside the subcomponent to receive the passed value
- 2. The parent component passes the value to the child component through attributes when using the child component.
- Subassembly
- Parent component (App)
- Special note: child components cannot operate on the data passed in the parent component, they can only access
- 3. Subcomponent passes data to parent component
1. Parent components and child components
Understanding parent components and child components case 1
The demo component is imported into App.vue, the local component is registered, and the demo component
App.vue is the parent component and demo.vue is the child component.
Understanding parent components and child components case 2
2. Parent component passes data to child component
Effect display: The parameters in stu1 are fixed and cannot change dynamically, and the shortcomings are obvious
1. Subcomponents
<template>
<h1>班级{
{
cls}}</h1>
<table border="1">
<tr>
<th>学号</th>
<th>年领</th>
<th>名字</th>
</tr>
<tr v-for="item in stu1">
<td>{
{
item.id}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
</tr>
</table>
</template>
<script>
export default{
data(){
return{
cls:"python1",
stu1:[
{
id:1,name:'zs',age:18},
{
id:2,name:'lisi',age:19},
{
id:3,name:'ww',age:17}
]
}
}
}
</script>
<style>
</style>
2. Parent component (App)
<template>
<!-- demo组件 -->
<!-- <demo></demo> -->
<mtable></mtable>
</template>
<script>
import demo from './components/demo.vue';
import mtable from './components/MyTable.vue';
export default {
name: 'App',
components: {
demo,
mtable
}
};
</script>
<style>
</style>
3. Implementation steps
1. Define props inside the subcomponent to receive the passed value
props: the values passed by the parent component to the properties in the child component when used;
props:['cls','stu1']: means that the values defined in the parent component are passed to cls and stu1 in the child component.
2. The parent component passes the value to the child component through attributes when using the child component.
Subassembly
<template>
<h1>班级{
{
cls}}</h1>
<table border="1">
<tr>
<th>学号</th>
<th>年领</th>
<th>名字</th>
</tr>
<tr v-for="item in stu1">
<td>{
{
item.id}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
</tr>
</table>
</template>
<script>
export default{
data(){
return{
}
},
props:['cls','stu1']
}
</script>
<style>
</style>
Parent component (App)
<template>
<!-- demo组件 -->
<!-- <demo></demo> -->
<!-- <mtable></mtable> -->
<mtable1 cls="python2" v-bind:stu1='stu1'></mtable1>
<mtable1 cls="python3" v-bind:stu1='stu2'></mtable1>
</template>
<script>
import demo from './components/demo.vue';
import mtable from './components/MyTable.vue';
import mtable1 from './components/MyTable1.vue';
export default {
name: 'App',
data(){
return{
stu1:[
{
id:1,name:'zs',age:18},
{
id:2,name:'lisi',age:19},
{
id:3,name:'ww',age:17}
],
stu2:[
{
id:3,name:'zs',age:18},
{
id:4,name:'lisi',age:19},
{
id:5,name:'ww',age:17}
],
}
},
components: {
demo,
mtable,
mtable1
}
};
</script>
<style>
</style>
Special note: child components cannot operate on the data passed in the parent component, they can only access
3. Subcomponent passes data to parent component
Principle: It is best not to modify the data passed from the parent component in the child component; the data source is in that component, and the deletion operation is performed in that component.
Implementation steps:
1. Define an event in the subcomponent
emit:['delete'],
methods:{
//触发组件的delete事件
delRow(index){
this.$emit('delete',index)
}
Subassembly
When the delete operation is clicked, the
@click="delRow(index)" function will be executed in the subcomponent.
<template>
<h1>班级{
{
cls}}</h1>
<table border="1">
<tr>
<th>学号</th>
<th>年领</th>
<th>名字</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in stu1">
<td>{
{
item.id}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
<td><button @click="delRow(index)">删除</button></td>
</tr>
</table>
</template>
<script>
export default{
data(){
return{
}
},
//定义组件的属性（父组件使用时传递的属性）
props:['cls','stu1'],
//自定义组件的事件
emit:['delete'],
methods:{
// delRow(index){
//原则：在子组件中最好不要修改父组件中传递过来的数据
//index是要删除数据的索引
// }
//触发组件的delete事件
delRow(index){
this.$emit('delete',index)
}
}
}
</script>
<style>
</style>
parent component
Execution steps:
The parent component passes the cls and stu1 values to the child component
and listens to the delete event. When the delete event is triggered, the later bound method del will be executed.
<template>
<!-- demo组件 -->
<!-- <demo></demo> -->
<!-- <mtable></mtable> -->
<!-- <mtable1 cls="python2" v-bind:stu1='stu1'></mtable1> -->
<!-- <mtable1 cls="python3" v-bind:stu1='stu2'></mtable1> -->
<mtable2 @delete='del' cls='py6' :stu1="stu1"></mtable2>
<slotdemo>
<h3>111</h3>
</slotdemo>
</template>
<script>
import demo from './components/demo.vue';
import mtable from './components/MyTable.vue';
import mtable1 from './components/MyTable1.vue';
import mtable2 from './components/MyTable2.vue';
import slotdemo from './components/SlotDemo.vue';
export default {
name: 'App',
data(){
return{
stu1:[
{
id:1,name:'zs',age:18},
{
id:2,name:'lisi',age:19},
{
id:3,name:'ww',age:17}
],
stu2:[
{
id:3,name:'zs',age:18},
{
id:4,name:'lisi',age:19},
{
id:5,name:'ww',age:17}
],
}
},
methods:{
// del:function(index){
// this.stu1.splice(index,1)
// }
del(index){
this.stu1.splice(index,1)
}
},
components: {
demo,
mtable,
mtable1,
mtable2,
slotdemo
}
};
</script>
<style>
</style>
expand
It can be seen from the data between components:
the parent component passes the src and alt data to the child component img, and
the child component uses props to receive it.
<img src="" alt=""/>
The child component contains a click event, emit:['delete'], and
the child component passes the delete event to the parent component.
<button @delete="del"></button>