Vue观察者模式

最新推荐文章于 2024-06-24 13:59:39 发布

orangeVege

最新推荐文章于 2024-06-24 13:59:39 发布

阅读量961

点赞数

分类专栏： Web前端设计文章标签： Vue观察者模式

本文链接：https://blog.csdn.net/cfyfcyf/article/details/90730907

版权

Web前端设计专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue观察者模式详解：
观察者模式，又称订阅发布模式（总线），用于非父子关系的vue组件之间的值的传递。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件间的传值，Bus/总线/订阅发布模式/观察者模式</title>
	</head>
	<body>
		<div id="app">
			<child  content="helloword"></child>
			<child content="hellovue"></child>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script type="text/javascript">
			Vue.prototype.bus=new Vue();
			Vue.component("child",{
				data(){
					return {
						contentchild:this.content
					}
				},
				props:["content"],
				template:"<div @click='clickfun'>{{contentchild}}</div>",
				methods:{
					clickfun(){
						this.bus.$emit("change",this.contentchild);
					}
				},
				mounted() {
					let _this=this;
					this.bus.$on("change",function(msg){
						_this.contentchild=msg;
						// alert(msg);
					})
				}
			})
			var app=new Vue({
				el:"#app"		
			})
			
		</script>
	</body>
</html>

代码解析：
data(){ return { contentchild:this.content } },：父组件传递给子组件的值无法直接修改，在子组件中赋值一个变量，接受传来的数据，进行修改，即可。

Vue小知识点：
1、子组件定义规则为驼峰命名法，如（MyLtem）,在父组件中使用时，应用小写，格式为my-ltem。
2、用html代码写vue，引入vue.js应该在创建Vue实例所在scirpt的上方。

orangeVege

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue观察者模式

Vue观察者模式详解：观察者模式，又称订阅发布模式（总线），用于非父子关系的vue组件之间的值的传递。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>组件间的传值，Bus/总线/订阅发布模式/观察者模式</title> </h...
复制链接

扫一扫