介绍:
组件的使用场景:在做项目当中,有些模块我们是要多次用到的,或者这一块是一个完整独立的功能,那么我们可以将其独立出来,封装成一个组件。
一、组件的使用
首先,我们要创建(注册)一个组件,主要两种方式:
- 在本页面中创建一个template模板,这种方式实际开发中不太常用,请自行百度
- 单独创建.vue文件,形成一个组件,下面主要介绍这种模式
1、创建.vue文件
<template>
<div>
此处可以写想要的模板
</div>
</template>
<script>
export default {
name: "myComponent",
data() {
return {}
},
methods: {},
mounted() {}
}
</script>
2、引用
<template>
<div>
<my-component></my-component><!--在此处引用组建-->
</div>
</template>
<script>
import MyComponent"./myComponent";//首先我们要导入进来
export default {
components: {MyComponent},//加入组建当中
data() {
return {}
},
methods: {},
mounted() {}
}
</script>
二、组建的一些特性
1、props传值(父组件向子组件传值)
组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。通常父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过 props 来实现的。
我们来看一下例子:
<script>
export default {
name: "myComponent",
data() {
return {}
},
props: {
testData1: Array,//没有默认值的形式,传入的值必须是数组
testData2: [Boolean,Number],//必须是Boolean或者Number类型
testData3: {//有默认值的形式,传入的值必须是字符串
type: String,
default: function() {
return 'hello 小梵'
}
}
},
methods: {},
mounted() {}
}
</script>
注:数据是单向传递的,该变父组件的值,子组件会发生变化,但是在子组件中处理props中的值,父组件不会发生变化。
2、组件中间传值
i)、使用$ emit()
子组件用 $ emit()来触发事件,父组件用$on()来监听子组件的事件
例子如下:
//子组件:
<template>
<div>
<p @click="test()">点击+1</p>
</div>
</template>
<script>
export default {
name: "myComponent",
data() {
return {
count: 0
}
},
methods: {
test() {
this.count++;
this.$emit ('increase', this.count);
}
},
mounted() {}
}
</script>
//父组件
<my-component @test="otherFun"></my-component>
<script>
methods: {
otherFun() {
//在此处进行操作
}
},
</script>
ii)、 $dispatch()和 $broadcast()
这两个方法用于向上级派发事件,只要是它的父级(一级或多级以上),都可以在Vue 实例的 events 选项内接收。
注:此方法是vue1.x 的内容,此处不做讲解
iii)、使用slot分发
当需要组件组合使用时,混合父组件和子组件模板时,就会用到slot,这个过程就叫做内容分发。
例子:
<div id="app">
<child-component>
<p>分发内容</p>
<p>更多</p>
</child-component>
</div>
<script>
Vue.component(' child-component ',{
template:'\
<div>\
<slot>\
<p>如果父组件没有插入内容,默认显示</p>\
</slot>\
</div>',
});
var app = new Vue({
el:'#app',
})
</script>
iv)、其他的一些可以通信的方式
-
$ nextTick
异步更新队列:Vue观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生所有数据改变。在缓冲时会去除重复数据避免不必要的计算。在下一个事件循环tick中,Vue刷新队列并执行实际工作。
当页面有 v-if 判断时,逻辑处理处理中会对相应的dom进行操作,但此时元素并未加载,页面就会报错,所以要使用$ nextTick。$ nextTick就是用来知道什么时候dom更新完成的。 -
X-Templates
当组件内容过长时使用拼接字符串是很麻烦的。Vue提供了另一种定义模板的方式,在<script>
标签中使用text/template
类型,并指定id赋值template。这样在<script>
中可以写html代码,不需要考虑换行问题了。 -
手动挂载实例
我们现在所创建的实例都是通过 new Vue()的形式创建出来的 。在一些非常特殊的情况下,我们需要动态地去创建 Vue 实例, Vue 提供了Vue.extend
和$mount
两个方法来手动挂载 个实例。
Vue.extend
是基础 Vue 构造器,创建 个“子类”,参数是 个包含组件选项的对象。
如果 Vue 实例在实例化时没有收到 el 选项,它就处于“未挂载”状态,没有关联的 DOM元素。可以使用$mount()
手动地挂载一个未挂载的实例。这个方法返回实例自身,因而可以链式调用其他实例方法。
注:以上内容,很多模块都值得细细研究,可以自行百度进行补充