一、封装组件的步骤
1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。
2. 准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。
4. 封装完毕了,直接调用即可。
二:代码详解
<search @select="select" :list="list" :value="value"></search>
1、props(传参数据)
list、value 都是需要传给子组件的数据
子组件接收传参数据:
props: {
list: Array,
value: Object
},
mounted() {
this.data = this.list
}
props 中接收数据,注意props对象里面 键值 是对该数据的 数据类型 的规定。做了规范,使用者就只能传输指定类型的数据,否则报警告。
而props对象中的数据,我们可以直接在当前组件中使用 this.searchList,可以直接使用。这里要强调一下,props传过来的数据只做展示,不得修改,想修改,再新写一个data中的变量承接做数据的再处理。至于原因,同上,可以看一下js的原型。至于原理嘛,不懂的可以取脑补一下 js的原型 。
2、emit的使用(如何暴露组件方法)
我们已经会使用 父组件向子组件传数据了,那如子组件如何来修改父组件的数据呢?
$emit 方法去调父组件的方法,在父组件中修改data的数据。
// 父组件
<search @select="select" :list="list" :value="value"></search>
select(value) {
this.value = value;
console.log(this.value);
}
// 子组件
this.$emit('select', value)
将父组件的方法注入子组件 @select="select" ,然后在子组件中通过 $emit 调用他,并传递参数,达到修改的目的。
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用:var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
三、完整代码
<template>
<div class="">
<search @callback="callback" :searchList="searchList"></search>
<hr>
<pre>searchList = {{searchList}}</pre>
<pre>selectValue = {{selectValue}}</pre>
</div>
</template>
<script>
// 引入组件
import search from '../modules/search'
export default {
// 组件数据
data() {
return {
searchList: [
'草船借箭',
'大富翁',
'测试数据'
],
selectValue: ''
}
},
// 注册组件
components: {
search
},
// 方法集合
methods: {
callback(value) {
this.selectValue = value
}
}
}
</script>
<template>
<dl class="">
<dd
v-for="(item, index) in searchList"
:key="index"
@click="choseValue(item)">{{item}}</dd>
</dl>
</template>
<script>
export default {
// 组件数据
data() {
return {
data: [],
searchValue: ''
}
},
// 接收数据
props: {
searchList: Array
},
// 钩子函数
mounted() {
this.data = this.searchList;
},
// 方法集合
methods: {
choseValue(value) {
// 通过$emit来回调父组件修改值
this.$emit('callback', value);
}
}
}
</script>
相关阅读:
https://www.cnblogs.com/pengfei-nie/p/9134367.html
https://blog.csdn.net/xdnloveme/article/details/78035065