多个页面需要使用相同的一部分代码样式,可以将这部分代码拿出来封装为组件
例如下面代码中的 “菜单 ” 就可以封装为一个通用的组件
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
菜单
</el-col>
<el-col :span="18">
表格
</el-col>
</el-row>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》from '《组件路径》';
export default {
//import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {};
},
//计算属性类似于data 概念
computed: {},
//监控data 中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期- 创建完成(可以访问当前this 实例)
created() {},
//生命周期- 挂载完成(可以访问DOM 元素)
mounted() {},
beforeCreate() {}, //生命周期- 创建之前
beforeMount() {}, //生命周期- 挂载之前
beforeUpdate() {}, //生命周期- 更新之前
updated() {}, //生命周期- 更新之后
beforeDestroy() {}, //生命周期- 销毁之前
destroyed() {}, //生命周期- 销毁完成
activated() {} //如果页面有keep-alive 缓存功能,这个函数会触发
};
</script>
<style scoped></style>
vue需要使用一个组件时 需要先导入组件例如:import 《组件名称》from ‘《组件路径》’;
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》from '《组件路径》';
import category from '../common/category';
export default {
//import 引入的组件需要注入到对象中才能使用
components: {
category : category
},
props: {},
data() {
//这里存放数据
return {
};
},
//计算属性类似于data 概念
computed: {},
//监控data 中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期- 创建完成(可以访问当前this 实例)
created() {},
//生命周期- 挂载完成(可以访问DOM 元素)
mounted() {},
beforeCreate() {}, //生命周期- 创建之前
beforeMount() {}, //生命周期- 挂载之前
beforeUpdate() {}, //生命周期- 更新之前
updated() {}, //生命周期- 更新之后
beforeDestroy() {}, //生命周期- 销毁之前
destroyed() {}, //生命周期- 销毁完成
activated() {} //如果页面有keep-alive 缓存功能,这个函数会触发
};
</script>
父子组件传递数据
子组件给父组件发送数据,使用事件机制,子组件给父组件发送一个事件,这个事件携带数据
例如 elementUI中的Tree组件,可以使用 node-click 事件 节点被点击时的回调
此事件需要添加在子组件中
<el-tree
:data="menus"
:props="defaultProps"
node-key="catId"
ref="menuTree"
//此处为点击事件
@node-click="nodeclick"
:filter-node-method="filterNode"
:highlight-current = "true"
></el-tree>
并在method中添加事件回调方法
- $ e m i t 向 父 组 件 发 送 事 件 t h i s . emit 向父组件发送事件 this. emit向父组件发送事件this.emit(“事件名称”, 传递的数据可传递多个);
nodeclick(data, node, component) {
console.log("子组件category的节点被点击", data, node, component);
//向父组件发送事件;
this.$emit("tree-node-click", data, node, component);
}
父组件可以绑定子组件散发的事件,并触发父组件自己的方法
<el-col :span="6">
<category @tree-node-click="treenodeclick"></category>
</el-col>
//感知树节点被点击
treenodeclick(data, node, component) {
if (node.level == 3) {
this.catId = data.catId;
this.getDataList(); //重新查询
}
}
父组件向子组件传值,例如将修改框抽取为一个单独组件
- this.$nextTick()
当要显示的一个组件完全显示后 再去调用一个方法 例如此处的 修改新增组件
- this
代表当前vue组件
- $refs
当前vue组件里的所有组件
- addOrUpdate
子组件的名字
- init(id)
调用子组件的那个方法,传递了什么数据
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
}