Vue中使用components的使用技巧

使用技巧"/>

Vue中使用components的使用技巧

1、components概念

components顾名思义：组件（负数），每个vue页面，都可以作为一个组件，引入到其他页面中，形成父子页面嵌套的形式，一个页面可以被多个页面引用，一个页面也可以引用多个页面，多对多关系
这样做的好处就是可复用，减少重复代码的编写

2、代码示例

例如要实现A.vue为父，B.vue为子，A中引入B组件，以弹窗的形式展现B组件
只要参考本示例，便可以实现组件封装和调用

B.vue中：

<template><el-dialog :visible.sync="dialogFormVisible">此处编写弹窗内容</el-dialog>
</template>
<script>
export default {//指定name，父页面会用到name: 'childBView',data() {return {dialogFormVisible: false // 弹窗是否出现}},methods: {//父页面会调用此函数，展示弹窗showDiaLog(param){this.dialogFormVisible = true//调用父页面的函数-示例（非必须）this.$parent.getList()//关闭弹窗，可以视情况触发//this.dialogFormVisible = false}}
}
</script>

A.vue中：

<template><ChildBView ref = 'childBView' ></ChildBView>
</template>
<script>
import ChildBView '@/views/填写目标路径/childBView'
export default {name: 'parentAView',//引用组件B.vuecomponents: { ChildBView },methods: {//调用子组件的方法，展示弹窗handleShowDiaLog(param){this.$refs.childBView.showDiaLog(param)},getList(){//方法体}}
}
</script>