【vue】父组件与子组件之间的数据交互

导读:本篇文章讲解 【vue】父组件与子组件之间的数据交互,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

在这里插入图片描述


一、前端项目目录结构

在这里插入图片描述

二、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>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/73947.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!