Vue中的组件详谈

178 阅读 0 评论 118 点赞

我是靠谱客的博主懦弱便当，这篇文章主要介绍Vue中的组件详谈，现在分享给大家，希望可以做个参考。

一、组件的注册

组件注册需要注意的有五点：

1、data要写成函数，并且用return返回一个值，这样不同的调用才能互不影响

2、template后面跟的是飘号，就是Tab上面那个键

3、template后面的内容要写在一个大的div里面，不要分开多个div

4、props后面的是数组，因为有很多个prop

5、要保存成js文件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Vue.component("myson",{
	data(){
		return{
			sonmsg:"hello son"
		}
	},
	template:`
	<div>
		<p>子组件内容</p>
		prop接收到的值：{{sonprop}}
	</div>
	`,
	props:["sonprop"],
	methods:{
		sonclick(){
			this.$emit("sonemit",this.sonmsg)
		}
	}
})

二、组件的使用

使用时只要注意一点就好，要先引用vue，再引用子组件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="00-组件-子.js"></script>
	</head>
	<body>
		<div id="app">
			<myson></myson>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					parentmsg:"parentmsg to sonprop"
				}
			})
		</script>
	</body>
</html>

三、父传子

父传子比较简单，分成两步

1、在组件里定义prop

复制代码

1
props:["sonprop"]

2、使用组件时，用定义的prop绑定父的值

复制代码

1
<myson :sonprop="parentmsg"></myson>

父里面的值是这样的

复制代码

1
2
3
data:{
					parentmsg:"parentmsg to sonprop"
				}

详细传递过程是这样的，看起来比较复杂，其实就上面说的两步

四、子传父

子组件给父传数值要通过方法来传递，父和子各定义一个方法，然后用一个中间方法来连接，记住这个中间方法的使用就行了，步骤详细分解开挺多的

1、在子组件的template的button里使用一个点击事件

复制代码

1
<button @click="sonclick">按钮</button>

2、在子组件里定义上面使用的方法，触发一个中间方法并传递数据

复制代码

1
2
3
sonclick(){
			this.$emit("sonemit",this.sonmsg)
		}

3、父使用子组件时，用中间方法绑定自己的方法

复制代码

1
<myson @sonemit="parentclick"></myson>

4、在父的方法里接收数据，这里p可以写成任意字符

复制代码

1
2
3
parentclick(p){
			vm.parentmsg=p;
		}

详细代码图

运行效果

五、插槽

1、加入插槽，插槽就是在组件里留一个空位，使用组件时可以插入任意东西

在子组件某个位置定义：<slot></slot>

使用组件时就可以在该位置添加任意标签

2、加入多个插槽时，要为每个插槽命名，使用时每个slot要放在一个template里面

定义多个插槽

复制代码

1
2
3
4
5
6
7
8
9
10
template:`
	<div>
		<p>子组件内容:{{sonmsg}}</p>
		<p>分隔线111111111111111</p>
		<slot name="a1"></slot>
		<p>分隔线2222222</p>
		<slot name="a2"></slot>
		<p>分隔线333333333</p>
	</div>
	`,

使用多个插槽，一个template放一个slot

复制代码

1
2
3
4
5
6
<template slot="a1">
					<button>按钮a1</button>
				</template>
				<template slot="a2">
					<button>按钮a2</button>
				</template>

六、子组件给插槽传值

1、在子组件template里定义中间数据emitmsg，名字可以随便

复制代码

1
<slot name="a1" :emitmsg="sonmsg"></slot>

2、在父组件里用res接收，不管是多少个子组件，都是用res接收，res是结果集，如果有多个slot的话，数据都会在里面

复制代码

1
2
3
<template slot="a1" slot-scope="res">
					{{res.emitmsg}}
				</template>

代码展示

显示效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注靠谱客的更多内容！

最后

以上就是懦弱便当最近收集整理的关于Vue中的组件详谈的全部内容，更多相关Vue中内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：178 次浏览
发布日期：2022-05-13 09:40:03
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_ogf4_12__23_g2.html

Vue中的组件详谈

目录

一、组件的注册

二、组件的使用

三、父传子

四、子传父

五、插槽

六、子组件给插槽传值

总结

最后

评论列表共有 0 条评论

发表评论取消回复

Vue中的组件详谈

目录

一、组件的注册

二、组件的使用

三、父传子

四、子传父

五、插槽

六、子组件给插槽传值

总结

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复