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中：
这里一定要注意，import中不要加{}！！！！！加了就出不来并且报错

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