Vue中使用components的使用技巧

Funky_oaNiu

已于 2024-12-11 09:03:48 修改

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2023-11-08 13:59:58 首次发布

本文链接：https://blog.youkuaiyun.com/Funky_oaNiu/article/details/134286072

本文介绍了Vue中的组件概念，如何在A.vue作为父组件时引入并调用B.vue子组件，通过`<template>`标签和`ref`属性展示了弹窗组件的封装和父子组件间的通信方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>