（三）VUE自定义事件兄弟、父子组件通讯

最新推荐文章于 2024-02-01 16:46:47 发布

luck_lin

最新推荐文章于 2024-02-01 16:46:47 发布

阅读量271

点赞数

分类专栏： frame class 文章标签： vue

本文链接：https://blog.csdn.net/qwe502763576/article/details/80002886

版权

frame class 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="app"></div>
	<div id="app2">
		<div>
			<!-- vue自定义组件写在html中必须双标记闭合写法 -->
			<Sibling1></Sibling1>
			<Sibling2></Sibling2>
		</div>
		
	</div>
</body>
<script>

	var title = {
		data(){
			return {
				lang: "大吉大利！今晚吃鸡？"
			}
		},
		template: "<div @click='tochangeName'>{{lang}}</div>",
		methods: {
			tochangeName(){
				this.$emit("onName")
			}
		}
	}
	var myInput = {//自定义的input组件
		// props: ['ty', 'va', 'pl'],//必须提前声明要接收的属性,不然报错
		props: {//属性验证，增强组件健壮性
			ty: {
				type: String,
				required: true
			},
			va: [Number, String],
			pl: String
		},
		template: "<input :type='ty' :value='va' :placeholder='pl' @input='changeName'/>",
		methods: {
			changeName(e){
				this.$emit("input", e.target.value)
			}
		}
	}
	var app = new Vue({
		el: "#app",
		data:{
			name: "林哥"
		},
		template: `<div>
						<h1>{{name}}胜利</h1>
						<con @onName='changeName'/>
						<my-input ty='type' va='linge' pl='输入大名哇' v-model='name'/>
						<my-input ty='password' pl='输入密码'/>
					</div>`
		,			//这里<my-input v-model='name'/>是语法糖写法，原始写法是<my-input @input='name = arguments[0]'/>这里是用自定义属性名为input，并且回调函数只有一行代码简写在行内@input='name = arguments[0]'。
		components: {
			'con': title,
			'my-input': myInput
		},
		methods: {
			changeName(){
				this.name = this.name ==="林哥" ? "linge" : "林哥"
			}
		}
	})

// 自定义组件双向绑定总结：
		//1.自定义组件接受一个value属性，并把值赋给组件内部的input标签
		//2.给组件内部的input绑定input事件，然后在事件回调函数中定义this.$emit执行一个自定义input事件，并传递value值
	

	//兄弟组件数据传递(不使用vuex)：
	var bus = new Vue();//new Vue创建一个空的vue实例作为事件总线
	Vue.component('Sibling1', {
		data(){
			return {
				money: 0
			}
		},
		mounted(){
			bus.$on("getSblingdata", m=>{
				console.log(m)//1000
			})
		},
		template: `<div>{{money}}</div>`
		
	})
	var Sibling2 = {
		template: "<button @click='getSibling'>GET</button>",
		methods: {
			getSibling(){
				bus.$emit("getSblingdata", 1000);
			}
		}
	}

	new Vue({
		el: "#app2",
		components: {
			 Sibling2,
		}
	})

</script>
</html>

luck_lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（三）VUE自定义事件兄弟、父子组件通讯

Document var title = { data(){ return { lang: "大吉大利！今晚吃鸡？" } }, template: "{{lang}}", methods: { tochangeName(){ this.$emit("onName") }
复制链接

扫一扫