【2】浅析Vue组件

最新推荐文章于 2023-10-11 15:12:52 发布

Youky_

最新推荐文章于 2023-10-11 15:12:52 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/qq_43882506/article/details/106432005

版权

组件的基本概念

Vue中有一个概念叫做组件化，就是把页面分成一个个小的部分，每个部分有自己的功能，且可以复用。最外层的组件即根组件，除此之外会有很多子组件。子组件分为两种，全局组件和局部组件：

全局组件，用 Vue.component(组件名，{}) 这种方法创建，在根组件接管范围内可以用组件名当标签名的方式直接使用。

Vue.component('item',{
    props:[],
    template: "<p>{{x}}</p>",
    data:function(){
        return{
            x:"hello"
        }
    },
    methods:{
        func:function(){}
    }
})

子组件与根组件不同的几个点在于：

有一个props用于接收父组件传来的值
有一个template，其值是定义的HTML模板，在使用组件时显示的就是这个模板
子组件的data是一个函数，其中返回一个对象，在这个对象中定义数据
局部组件的创建直接用对象形式，必须要在根实例的components中注册才能使用，其他方面和全局组件相同

is属性

因为在某些标签内，只允许出现特定的标签（如ul标签内只有li标签是有效的），因此使用子组件的模板时可能会引起解析错误，这时就要给标签添加is属性来解决这个问题：

<li is="item"></li>

使用is属性有两种方法，将子组件在components中注册后，用is="组件名"的方法；或是将子组件在data中注册，再用 :is="变量名"的方法使用。

通过后一种绑定方式，我们可以实现动态组件。即，将变量指向不同的组件，页面的内容也就跟着改变了。

给模板添加引用

通过传统的getElementById的方法不方便拿到子组件对应的节点，因此在组件的模板中，可以给标签加上一个ref属性ref=“引用名”，然后通过this.$refs.引用名就可以拿到这个DOM节点。这个方法对于普通标签同样适用。

v-once指令

组件第一次创建时会存入内存中，当再次调用该组件时不会重新创建组件，而是直接从内存中取。在标签中直接添加v-once即可，不需赋值

插槽

使用场景：在定义模板时，其中某一部分的具体内容还未确定，在使用子组件时再传入这一部分内容。
使用方法：在相应的位置用表示插槽占位，在使用模板时在模板内部传入内容，就会渲染到slot的位置。若模板中没有slot标签，使用子组件时，开始标签和结束标签间的内容将会被抛弃。
默认值：在slot标签内部可以提供html代码作为默认值，若在使用模板时没有传入内容，则显示默认值
具名插槽：当模板中出现了多个插槽时使用，在模板中给slot标签添加属性name=“slotName”。使用模板时，将传给插槽的内容包裹在template标签中，并为其添加属性v-slot:slotName
作用域插槽：让插槽内容能够访问子组件中才有的数据。模板向插槽中传入数据，但DOM结构在调用时决定。调用组件时向插槽传入的内容必须在外层包裹一个template标签，且该标签有一个slot-scope属性，其值接收模板传递来数据（接收到的是一个对象，用属性名获取到传来的值）
传递给模板的数据用v-bind绑定至一个新的变量。

<body>
	<div id='box'>
		<it>
			<template slot-scope="props">
				<h1>{{props.con}}</h1>
			</template>
		</it>
	</div>
	<script>
		Vue.component('it',{
			data:function(){
				return{
					text:['aa','bb']
				}
			},
			template:`
					<div>
						<slot v-for="item in text" :con="item"></slot>
					</div>
			         `
		})
		var vm=new Vue({
                    el:"#box"
                })
	</script>
</body>

组件间的传值

1. 父组件=>子组件

前面讲指令时已经说到过，v-bind指令可以用来接收父组件传给子组件的值，如要将父组件数组的值都存入子组件数组：

<p v-for="item in list" v-bind:content="item"></p>

再在子组件的props中定义content即可。

单向数据流：父组件传给子组件的值，不能在子组件中修改。如果确实需要修改，则在子组件中定义一个变量接收这个值，并在后续过程中修改这个变量。

参数校验：在子组件中对父组件传来的值进行约束，此时将子组件的props写为对象而不是数组，对象的每个键表示接收的数据，值有几种写法：

可以直接写为规定的类型（如String），注意不需要加引号
可以写成数组形式，表示值可以是里面任意一种类型
可以写成对象模式

type：规定的接收类型
required：是否必须。值为true表示必须传入这个值
default：没有传入这个值时该变量的默认值
validator：通过一个函数判断传入值是否符合要求

2. 子组件=>父组件

通过$emit(“自定义事件名”，参数)的方式向外触发事件，在父组件中添加响应函数，可使用子组件传递出的参数

监听自定义事件的方法：在子组件标签上用@事件名或.$on(事件名，响应函数)的方法进行事件监听

3. 非父子组件传值

非父子组件的传值，使用发布订阅模式，也叫总线模式。即将要传递的值挂载到总线上，其他任何要接收这个值的地方都可以通过总线获取这个值

创建bus属性： Vue.prototype.bus=new Vue()
需要传值时，在组件时间触发的函数中用this.bus.$emit(‘自定义事件名’,参数)向外方法触发自定义事件，需要传递的数据可以作为参数
在需要接收的地方，用this.bus.$on()方法接收传递来的事件（这部分代码可放在生命周期函数中）