vue父组件与子组件之间的数据交互方式详解
作者：YZL40514131
一、前端项目目录结构
二、vue单文件组件格式
注意1： scoped表示对当前组件生效
<style scoped></style>
这个是设置组件中html样式（css）的地方
style中加入scoped属性，表示style中设置的样式，只对当前组件生效
注意2：整个项目中多个组件共用的css写在assets中
main.js中导入全局css文件，才可以生效
import './assets/css/global.css'
注意3：
<template></template>：定义组件中的html模板的<script></script>:这里是写组件中js代码的<style></style>:这个是设置组件中html样式（css）的地方export default:默认导入data():定义组件中的属性methods:定义组件中的方法computed:定义组件中的计算属性watch:定义组件中的侦听器components:注册局部组件created:生命周期钩子函数（组件对象创建（初始化）完毕之后执行）mounted:生命周期钩子函数（组件数据挂载完毕之后执行）
<!--这个是组件的html(模板)-->
<template>
<div class="box">
这个是demo组件
</div>
</template>
<script>
这里是写组件中js代码的
export default{
//data中定义组件属性
data(){
return{
}
},
//定义组件中的方法
methods:{
},
//定义组件中的计算属性
computed:{
},
//定义组件中的侦听器
watch:{
},
//注册局部组件
components:{
},
//生命周期钩子函数
created(){
//组件对象创建（初始化）完毕之后执行
},
mounted(){
//组件数据挂载完毕之后执行
}
}
</script>
<!--这个是设置组件中html样式（css）的地方
style中加入scoped属性，表示style中设置的样式，只对当前组件生效
-->
<style scoped>
.box{
width:100px;
height: 100px;
background: red;
}
</style>三、js导入语法
注意4：
js中要使用import xx from xx 去导入js文件或者vue文件里面的内容
前提是文件中内容必须指定导出的内容
import xx from xxx
例如js文件内容如下
var a=100
var b='ttt'
var c={
'name':'kobe',
'age':18
}
方式一：暴露多个变量
在js中导出（暴露）内容
export a export c
在其他js文件或者vue文件中要导入a和c的时候
import {a,c} from 'xxx/xxx/data.js'
方式二：暴露（导出）一个默认的对象
export default{
a:a,
b:b,
'kobe':'kobe'
}
在其他的js或者vue文件中使用时，导入的方式
import ABC(变量,可以起任意的名字) from ‘xxx/xxx/xx.js’
import datas from 'xxx/xx/data.js'
案例1：导入组件
四、父组件和子组件
层级关系
五、父组件往子组件中传数据（组件属性）
效果展示：stu1中的参数固定，不能动态变化，缺点很明显
子组件
<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>
父组件（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>
效果展示：参数不固定，可以动态变化
实现步骤
1、子组件内部定义props接收传递过来的值
props：父组件在使用时给子组件中的属性传递的值；
props:[‘cls’,‘stu1’]：表示父组件中定义的值传给子组件中的cls和stu1
2、父组件在使用子组件时通过属性将值传递给子组件
子组件
<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>
父组件（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>
特别注意：子组件中不能操作父组件中传递过来的数据，只能访问
六、子组件往父组件中传数据（组件事件）
原则：在子组件中最好不要修改父组件中传递过来的数据；数据源在那个组件中，删除操作就在那个组件中进行删除
实现步骤：
1、子组件中定义一个事件
emit:['delete'],
methods:{
//触发组件的delete事件
delRow(index){
this.$emit('delete',index)
}
子组件
当点击删除操作的时候
子组件中会执行 @click="delRow(index)"这个函数
<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>
父组件
执行步骤：
父组件往子组件中传递cls和stu1值
监听delete事件，当delete事件被触发时，会执行后面绑定的方法del
<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>
拓展
通过组件之间数据可知：
父组件向子组件img传递了src和alt数据
子组件中使用props进行接收
<img src="" alt=""/>
子组件中含有click事件，emit:[‘delete’],
子组件向父组件传递delete事件
<button @click="xxx"></button>
总结
到此这篇关于vue父组件与子组件之间的数据交互方式的文章就介绍到这了,更多相关vue父组件与子组件数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！