Vue中的组件详谈

2024-10-07 00:01:53

一、组件的注册

组件注册需要注意的有五点：

1、data要写成函数，并且用return返回一个值，这样不同的调用才能互不影响

2、template后面跟的是飘号，就是Tab上面那个键

3、template后面的内容要写在一个大的div里面，不要分开多个div

4、props后面的是数组，因为有很多个prop

5、要保存成js文件

Vue.component("myson",{
	data(){
		return{
			sonmsg:"hello son"
		}
	},
	template:`
	<div>
		<p>子组件内容</p>
		prop接收到的值：{{sonprop}}
	</div>
	`,
	props:["sonprop"],
	methods:{
		sonclick(){
			this.$emit("sonemit",this.sonmsg)
		}
	}
})

二、组件的使用

使用时只要注意一点就好，要先引用vue，再引用子组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="00-组件-子.js"></script>
	</head>
	<body>
		<div id="app">
			<myson></myson>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					parentmsg:"parentmsg to sonprop"
				}
			})
		</script>
	</body>
</html>

三、父传子

父传子比较简单，分成两步

1、在组件里定义prop

props:["sonprop"]

2、使用组件时，用定义的prop绑定父的值

<myson :sonprop="parentmsg"></myson>

父里面的值是这样的

				data:{
					parentmsg:"parentmsg to sonprop"
				}

详细传递过程是这样的，看起来比较复杂，其实就上面说的两步

四、子传父

子组件给父传数值要通过方法来传递，父和子各定义一个方法，然后用一个中间方法来连接，记住这个中间方法的使用就行了，步骤详细分解开挺多的

1、在子组件的template的button里使用一个点击事件

<button @click="sonclick">按钮</button>

2、在子组件里定义上面使用的方法，触发一个中间方法并传递数据

		sonclick(){
			this.$emit("sonemit",this.sonmsg)
		}

3、父使用子组件时，用中间方法绑定自己的方法

<myson @sonemit="parentclick"></myson>

4、在父的方法里接收数据，这里p可以写成任意字符

        parentclick(p){
			vm.parentmsg=p;
		}

详细代码图

运行效果

五、插槽

1、加入插槽，插槽就是在组件里留一个空位，使用组件时可以插入任意东西

在子组件某个位置定义：<slot></slot>

使用组件时就可以在该位置添加任意标签

2、加入多个插槽时，要为每个插槽命名，使用时每个slot要放在一个template里面

定义多个插槽

	template:`
	<div>
		<p>子组件内容:{{sonmsg}}</p>
		<p>分隔线111111111111111</p>
		<slot name="a1"></slot>
		<p>分隔线2222222</p>
		<slot name="a2"></slot>
		<p>分隔线333333333</p>
	</div>
	`,

使用多个插槽，一个template放一个slot

                <template slot="a1">
					<button>按钮a1</button>
				</template>
				<template slot="a2">
					<button>按钮a2</button>
				</template>

六、子组件给插槽传值

1、在子组件template里定义中间数据emitmsg，名字可以随便

<slot name="a1" :emitmsg="sonmsg"></slot>

2、在父组件里用res接收，不管是多少个子组件，都是用res接收，res是结果集，如果有多个slot的话，数据都会在里面

				<template slot="a1" slot-scope="res">
					{{res.emitmsg}}
				</template>

代码展示

显示效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

Vue3内置组件Teleport使用方法详解

目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置场景举例:一个 Button ,点击后呼出模态对话框这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间这样就有了一个问题:组件的
浅谈VUE uni-app 自定义组件

1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父组件自定义要显示的内容 4.使用easycom规范,可以真接使用组件 page/news/news.vue <template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick=&quo
浅谈VUE uni-app 基础组件

1 .scroll-view 使用竖向滚动时,需要给一个固定高度,通过 css 设置 height:使用横向滚动时,需要给添加white-space: nowrap;样式. scroll-y:允许纵向滚动,scroll-x:允许横向滚动 @scroll: 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 数据双向绑定 <template> <view> &
Vue开发Sort组件代码详解

目录 <template> <ul class="container"> <li v-for="(item,index) in datalist" :key="index"> {{item.text}}<span></span> </li> </ul> </template> <script> export default{ props:{
vue中router-view组件的使用详解

在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面. 这个时候我们就需要用到路由中的 router-view组件(也叫路由占位符) 了首先我们来到需要切换不同组件页的页面 ,在自己需要的位置添加 router-view组件 Home.vue <template>  <el-header> <div> <
Vue中的组件详谈

目录一.组件的注册二.组件的使用三.父传子四.子传父五.插槽六.子组件给插槽传值总结一.组件的注册组件注册需要注意的有五点: 1.data要写成函数,并且用return返回一个值,这样不同的调用才能互不影响 2.template后面跟的是飘号,就是Tab上面那个键 3.template后面的内容要写在一个大的div里面,不要分开多个div 4.props后面的是数组,因为有很多个prop 5.要保存成js文件 Vue.component("myson",{ data(
Vue中父组件向子组件通信的方法

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s
vue中各组件之间传递数据的方法示例

前言本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.
vue中component组件的props使用详解

本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的
vue中element组件样式修改无效的解决方法

如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染浅谈vue中改elementUI默认样式引发的st
Vue中UI组件库之Vuex与虚拟服务器初识

一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3
简单了解vue中父子组件如何相互传递值（基础向）

前言首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例--用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) 这里以root为挂载点,root里包含的所有内容可称为模板,即我们常说的父组件子组件:用Vue.component()注册的组件(下图todo-item就是组件的名称,该名称可自定义,推荐使用短横线分隔命名) 定义组件名的2种方式(截图截自vue官网) 注:建议在html中引用组件时(非字符串模板),
Vue中的组件及路由使用实例代码详解

1.组件是什么组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用全局组件 <body> <div id="app">  <myzujian></myzujian> </div> </body> <script>
vue中父子组件注意事项,传值及slot应用技巧

一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c