2
点赞
收藏
分享

微信扫一扫

vue组件笔记二

逸省 2022-05-05 阅读 250
vue.js
子传父:自定义事件 v-on
  • props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。我们应该如何处理呢?这个时候,我们需要使用自定义事件向父组件传递参数来完成。

  • 我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。

传递字符串
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<msg @post-text="rec"></msg>
		</div>
		<template id="msgTemplate">
			<div>
				<button @click="post(text)">{{text}}</button>
			</div>
		</template>
		<script>
			let msg = {
				data() {
					return {
						text: '五一节日快乐!'
					}
				},
				methods: {
					post(text) {
						// $emit 用于子组件向父组件传递数据的方法。
						// 两个参数: 1、向父组件提供的一个自定义指令名。 2、子组件要发送出去的数据。
						this.$emit('post-text', text)
					}
				},
				template: msgTemplate
			}
			let app = new Vue({
				el: '#app',
				components: {
					msg
				},
				methods: {
					rec(value) {
						alert(value)
					}
				},
			})
		</script>
	</body>
</html>





传递对象
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<nav-list @item-click="goUrl"></nav-list>
		</div>
		
		<template id="navListTemplate">
			<div>
				<button v-for="(item,index) in navList" @click="post(item)" >{{item.name}}</button>
			</div>
		</template>
		<script>
			let navList = {
				data() {
					return {
						navList: [
							{id:1,name:"java"},
							{id:2,name:"html"},
							{id:3,name:"css"},
							{id:4,name:"js"}
						]
					}
				},
				methods: {
					post(item){
						this.$emit('item-click',item)
					}
				},
				template: navListTemplate
			}
			let app = new Vue({
				el: '#app',
				components: {
					"nav-list":navList
				},
				methods: {
					goUrl(item){
						console.log(item);
					}
				},
			})
		</script>
	</body>
</html>

兄弟组件通信

留坑,将工程的时候讲

访问组件DOM

  • $parent 在子组件中访问父级DOM 不常用
  • $children 在父组件访问子级DOM 1个子组件 肯定[0] 如果多个子组件 [0,1,2] 他的顺序是不一定的。需要数组进行一个遍历,才能应用
  • $root 访问根DOM
  • $refs 直接定位需要访问的组件

插槽

默认插槽的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<top-cpn>时尚男鞋</top-cpn>
		
		</div>
		<!-- 插槽slot 是用在子组件的模板中 <slot></slot> -->
		<template id="topTemplate">
			<div>
				<img src="img/btnstart.png" alt="" srcset="">
				<span style="color: aquamarine;font-size: 30px;">
					<slot></slot>
				</span>
			
			</div>
		</template>
		
		<script>
			let topCpn = {
				template: topTemplate,
			}

			let app = new Vue({
				el: '#app',
				components: {
					"top-cpn":topCpn
				}

			})
		</script>
	</body>
</html>

具名插槽的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<top-cpn>
				<template #one>
					时尚男鞋
				</template>
				<template v-slot:three>
					时尚女鞋
				</template>
			</top-cpn>
		</div>
		<!-- 插槽slot 是用在子组件的模板中 <slot></slot> -->
		<template id="topTemplate">
			<div>
				<div class="testSolt">
					<p class="title">具名插槽</p>
					<!-- 给插槽加name 属性,就是所谓的具名插槽 -->
					<slot name="one"></slot>
					<slot name="two"></slot>
				</div>
				<!-- 子组件也可以同时定义多个具名插槽 -->
				<div style="margin-top:300px;background:#fff;height:100px;color:blue;">
					<slot name="three"></slot>
				</div>
			</div>
		</template>

		<script>
			let topCpn = {
				template: topTemplate,
			}

			let app = new Vue({
				el: '#app',
				components: {
					"top-cpn": topCpn
				}

			})
		</script>
	</body>
</html>

作用域插槽的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<top-cpn >
				<!-- 插槽里面同时可以插入一个组件 或者字符串内容等都可以 -->
				<template v-slot="slotProps">
				<p>{{slotProps.obj.msg}}---{{slotProps.obj.message}}</p>
				</template>
			</top-cpn>
		</div>
		
		<template id="topTemplate">
			<div>
				<div class="testSolt">
					<p class="title">作用域插槽</p>
					<!-- 子组件中告诉父组件,要实现obj里的信息 -->
					<slot :obj="obj">默认信息</slot>
				</div>
			</div>
		</template>
		<script>
			let topCpn = {
				data() {
					return {
						obj: {
							msg: '我是msg',
							messge: '我是message'
						}
					}
				},
				template: topTemplate,
			}

			let app = new Vue({
				el: '#app',
				components: {
					"top-cpn": topCpn
				}

			})
		</script>
	</body>
</html>

api

set delete
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式:通过两个大括号,把变量包起来 -->
			<!-- <div ref="showtext">{{showText}}</div>-->
			<button @click="addAge">添加年龄</button>
			{{obj}}
		</div>
		<script>
			let vm = new Vue({
				el: '#app', // el = element的缩写 挂载到那个元素上,或者将来渲染到那个区域 id #app css基础选择器 # id . class 
				data: {
					showText: 'Hello Vue',
					obj: {
						name: "hahaha",
						sex: "男性"
					}
				},
				mounted() {
					// console.log(this.$refs.showtext.innerText);
				},
				methods: {
					addAge() {
						// this.obj.age = 12
						// 动态添加对象的属性,并且希望在视图中实时更新
						this.$set(this.obj,"age",18)
						console.log(this.obj);
					}
				},
			});
		</script>
	</body>
</html>

举报

相关推荐

2 条评论

不错