Vue components选项

最新推荐文章于 2024-08-25 17:51:54 发布

Red 1027

最新推荐文章于 2024-08-25 17:51:54 发布

阅读量741

点赞数 3

文章标签： vue js html vue.js javascript

本文链接：https://blog.csdn.net/red1027/article/details/114410044

版权

本文介绍了Vue组件间的通信方式，包括父子传递、子传父及兄弟组件间利用provide和inject进行通信。同时提到了使用中可能遇到的坑，如组件的根元素重复、变量检查和符号遗漏等问题。

摘要由CSDN通过智能技术生成

Vue components选项

<body>
			<div id="app">
				<h1>{{title}}</h1>  <p>我是:{{name}}</p> <p>我有:{{a}}</p>
				<c></c>	/*继承components 首先需要在选择的块里加上key标签*/
			</div>
	</body>
	<template id="dadd">
		<div>
			<h1>{{name}}</h1>
			<p>我有:{{a}}</p>
		</div>
	</template>
	//第二步:components选项中的key变量,声明时要再new Vue的上方
		let temp4 = {
			template:"#dadd",
			data(){
				return {
					name:"爸爸",
					a:"翡翠白菜"
				}
			}
		}
	//第一步
	var vm = new Vue({
			el:"#app",
			data:{
				title:"hello 你好",name:"爷爷",a:"江山"
			},
			//components,创建一个对象,key:c , val:temp4;
			components:{
				c:temp4
			}
		});

效果

在这里插入图片描述

父子传递(父传子)

<body>
			<div id="app">
				<h1>{{title}}</h1>
				<p>我是:{{name}}</p>
				/*准备好要传递的数据,属性名就是将来子组件要接收的数据名,属性值就是父组件要发给子组件的数据*/
			<c :abc="a"></c>
		</div>
	</body>
<template id="dadd">
		<div>
			<h1>{{name}}</h1>
			<p>我有:{{a}}</p>
			//这时会拿到父级的江山
			<p>我有:{{abc}}</p>
			<child1></child1>
		</div>
	</template>
		let temp4 = {
				template:"#dadd",
				data(){
					return {
						name:"爸爸",
						a:"翡翠白菜"
					}
				},
				//通过props接收父组件发送数据,props默认数组格式
				props:["abc"]
			}
			var vm = new Vue({
					el:"#app",
					data:{
						title:"hello 你好",name:"爷爷",a:"江山"
					},
					components:{
						c:temp4
					}
				});

在这里插入图片描述

子传父

<body>
		<div id="app">
			<h1>{{title}}</h1>
			<p>我是{{name}}</p>
			<p>我有{{a}}</p>
			<p>我拿到了儿子的:{{b}}</p>
			<c v-on:myeve="getData"></c>/*定义一个事件*/
		</div>
	</body>
<template id="son">
		<div>
			<h2>你好啊</h2>
			<p>我是{{name}}</p>
			<p>我有{{a}}</p>
		</div>
	</template>

let temp4 = {
			template:"#son",
			data(){
				return {name:"儿子",a:"继承权"}
			},
			created(){
			//子用this.$emit(自定义事件名,数据)触发自定义事件
				this.$emit("myeve",this.a)
			}
		}
		
		var vm = new Vue({
			el:"#app",
			data:{
				name:"父",a:"父爱如山",title:"hello vue",b:""
			},
			components:{
				c:temp4
			},
			methods:{
			//父定义此函数,准备一个空字符,接受数据
				getData(v){
					console.log(v);
					this.b = v;
				}
			}
		})

兄弟传递

<template id="brother">
		<div>
			<h1>我是:{{name}}</h1>
			<p>我有:{{a}}</p>
			<p>我<button @click="send">给</button>姐姐:{{a}}</p>
		</div>
	</template>
	<template id="sister">
	<body>
		<div id="app">
			<h1>我是:{{name}}</h1>
			<p>我有:{{a}}</p>
			<c></c>
			<d></d>
		</div>
	</body>
		<div>
			<h1>我是:{{name}}</h1>
			<p>我有:{{a}}</p>
			<p>我收到了:{{c}}</p>
		</div>
	</template>
	 中央事件总线
let bus = new Vue();
		let temp3 = {
			template:"#sister",
			data(){
				return {
					name:"姐姐", a:"口红", c:""
				}
			},
			created(){
			//通过中央事件总线,使用bus.$on(要绑定的事件名,事件处理方法)自定义将要被触发的事件,并接默认参数
				bus.$on("qwe",(v)=>{
					console.log(v);
					this.c = v
					})
			}
		}
		let temp4 = {
			template:"#brother",
			data(){
				return {
					name:"弟弟",
					a:"玩具"
				}
			},
			methods:{
				send(){
				//使用:bus.$emit(要出发的事件名,要发送的数据)准备触发自定义事件,并发送数据
					bus.$emit("qwe",this.a)
				}
			}
			
		}
		var vm = new Vue({
			el:"#app",
			data:{name:"父亲",a:"手机",c:""},
			components:{
				c:temp4,
				d:temp3
			}
		})