vue组件笔记二

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量237 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tydl206/article/details/124590952
版权
子传父:自定义事件 v-on

  • props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。我们应该如何处理呢？这个时候，我们需要使用自定义事件向父组件传递参数来完成。

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

自定义事件流程：

在子组件中，通过$emit()来触发事件。

在父组件中，通过v-on来监听子组件。

举例：click事件

  1. 子组件：模板template中，建立一个click事件，@click="post(text)，将要传递的数据作为参数。

  2. 子组件：建立post方法，用this.$emit()，发射自定义指令名和发射的参数

    post(arg) {
    this.$emit('post-text', arg)
}

  3. 在父!组件的模板HTML中，子组件标签上，添加自定义指令及方法

    注意@post-text=“recData” recData 不要加参数或（）

    <message-cpn @post-text="recData">
</message-cpn>

  4. 在父组件中，写recData方法，来接收数据

    methods: {
    recData(text) {
        console.log(text);
    }
},

传递字符串
<!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 直接定位需要访问的组件
插槽

Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’.使用插槽是在存在父子关系的组件，可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。

默认插槽： 通过父标签的内容 替换插槽内容

具名插槽 ：给插槽命一个名。 通过父标签的内容 替换插槽内容

作用域插槽： 通过子组件的数据 在父组件里展示

默认插槽的使用

<!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

nextTick

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>

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue组件笔记（一）
PHPer修炼之路
04-28 744
Vue组件基础 (重点) 组件实现与步骤 什么是组件化？ 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的。 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆内容。 但是，我们人有一种天生的能力，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现问题也会迎刃而解。 新房装修 改水电 地板砖 木工进厂 刷漆 买家具 家电 入住 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
vue指令:v-text,v-html,v-show
she8362315的博客
08-09 3156
指令 指令带有前缀 v-;列表内容 指令需要添加在DOM元素上 常用的指令 v-text 解释:更新元素的 textContent。如果要更新部分的 textContent 为空，需要使用 {{ Mustache }} 插值。 实例: 插值语法接受三元运算符 实例: v-html 解释: 更新元素的 innerHTML 。 注意：内容按普通 HTML 插入 -...
vue 点击按钮 显示/隐藏 文本动态显示
Liu_liu57的博客
03-15 1万+
vue 点击按钮 显示/隐藏 文本动态显示 &lt;template&gt; &lt;p id="example"&gt; &lt;button v-text="btnText" @click="showToggle"&gt;&lt;/button&gt; &lt;div v-show="isShow"&gt;要显
vue组件（前端笔记三）
baomingshu的博客
07-24 1031
①单页 Web 应用（single page web application，SPA）。Vue工程是单页面应用程序，整个工程只有一个完整的html页面。② 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。③数据需要通过 ajax 请求获取。④Vue 脚手架工程只有一个页面，浏览器也只能读取这一个页面的内容。Vue 通过组件的方式把要渲染到页面的内容进行拆分，拆分成组件，由 Vue 对象加载各个组件并渲染到页面.
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
vue学习笔记之组件传值
cnzzs的博客
07-16 963
说起组件传值，首先要介绍再vue中什么是组件。组件(Component)，是vue中很强大的一个功能，可以将一些可重用的代码进行重用。所有的vue组件同时也是vue实例，可以接受使用相同的选项对象和提供相同的生命周期钩子。用一句话来概括：组件就是可以扩展的HTML元素，封装可重用的HTML代码，可以将组件看做自定义的HTM...
vue组件通信 笔记
qq_62646841的博客
06-06 547
组件上 注册的一些 自定义属性。
Vue组件学习笔记
weixin_52253964的博客
10-31 184
Vue.js 组件学习笔记
学习笔记——Vue的组件化开发
2301_80093566的博客
07-16 431
Vue的组件化开发允许开发者将页面拆分成可重用、独立的组件，每个组件包含自己的 HTML、CSS 和 JavaScript 逻辑。
最新尚硅谷vue系列笔记
02-11
它可以配合Vue组件实现动态路由匹配、路由懒加载和命名视图等功能。 6. **生态丰富**：Vue生态系统非常活跃，有Vuex用于状态管理，Vue CLI作为项目脚手架工具，Axios用于异步请求，Element UI等UI库提供预设的组件...
vue2笔记和案例 vue2 笔记和案例
04-17
Vue 2是其第二个主要版本，它在Vue 1的基础上进行了优化和改进，提高了性能和开发者体验。本笔记和案例将深入探讨Vue 2的核心概念和实践应用。 1. **Vue实例**： - Vue实例是Vue应用的基础，它包含数据、方法、...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue2+vue3笔记
05-13
目前主要的 Vue 版本是 3.x 的，以前写 vue 的写法叫 options api(选项式 API)，这种写法是 vue2 中的。在 vue3 中新增了组合式 API(Composition API)。 setup 是 vue3 中新增的内容，这个方法中不能访问 this，可以...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 269
【代码】基于vue3和audio封装的简易音频播放器。
vue ref和reactive区别
最新发布
灰海
08-25 227
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1143
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
实现el-table 两列多选框且不可同时勾选，可单选，可多选
weixin_52740695的博客
08-21 302
审核通过可批量处理，可单选；审核不通过，单选，但两者不可同时勾选☑️。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值