Vue中关于组件的封装复用

我们在写前端代码时常常会有一些控件或者HMTL代码片段在许多页面都需要,并且内容几乎一样,只是数据的不同而已。此时,我们就可以把这些代码封装成组件,以供我们重复使用。

组件化:是一种思想,解决对复杂问题简单化的思想,将我们的程序开发成一个个独立可复用的小组件,然后用这些个小组件来构造出我们的应用。
好处:灵活可扩展,复用性强

流程:

  1. 封装组件
  2. 导入已经封装好的组件
  3. 在使用页面注册被使用组件
  4. 使用已封装好的组件

示例:
编写子组件

<template>
  <!-- 封装组件 -->
  <div>
    Hello World!
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
  		user: {type: Object, default: null}
  },
}
</script>

<style scoped>
</style>

使用组件:先引入要使用的组件,然后注册引入的组件,最后就可以直接使用了

<template>
  <div>
    <!--使用组件-->
    <HelloWorld ref="helloworld" :user="user"></HelloWorld>
  </div>
</template>

<script>
// 导入要使用的组件

import HelloWorld from './hello'

export default {
  name: "hello",
  // 注册组件
  components: {
    HelloWorld
  },
  data(){
  	return{
  		user: {name:'豪华', age:18}
  	}
}
</script>

<style scoped>
</style>

当然,在使用组件时免不了需要数据的相互传递或获取

<script>

//父组件可以直接获取到子组件的实例,从而得到子组件的属性和方法等
this.$refs.helloworld.xxx();	//helloword是引用名,在使用组件的代码中可以看到


//而子组件则是通过 props 属性来得到父组件的数据(可结合上面示例),步骤如下:
 1. props: {user: {type: Object, default: null} }	//写于子组件中,声明属性的类型(必),默认值(选)
 2. <HelloWorld :user="user"></HelloWorld>			//在父组件引用子组件时传递即可
// 注:并不是深拷贝,防止踩坑!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


//子组件也可以触发父组件中的方法
 1. this.$emit('changeUser', val);		//写于子组件中,括号中写触发方法名(必)与参数(选)
 2. <HelloWorld @changeUser="changeUser"></HelloWorld>	//在父组件引用子组件时传递即可触发父组件中的 changeUser 方法

</script>

欢迎交流讨论,不对的地方请指正鸭 ~

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue组件封装复用是指将代码逻辑和功能封装在一个独立的组件,并在需要的地方重复使用该组件的过程。 Vue组件封装可以通过以下步骤实现: 1. 创建组件:使用Vue框架提供的组件选项来创建一个组件。可以使用Vue.extend方法或者直接在Vue实例定义一个组件。 2. 封装功能:在组件添加业务逻辑、数据和方法等功能。可以通过计算属性、监听器、方法等实现具体的功能。 3. 编写模板:使用Vue的模板语法编写组件的结构和样式。通过将标签、属性和事件绑定到组件的数据和方法来实现交互效果。 4. 注册组件:将组件注册到Vue实例,使其可以在其他组件使用。可以使用Vue.component方法全局注册组件,也可以在局部组件通过components选项注册组件。 5. 使用组件:在需要的地方使用组件,可以通过标签的方式将组件插入到页面。 通过封装组件,可以将代码逻辑和UI元素进行有效地拆分和复用。例如,可以将页面重复出现的按钮、表单、卡片等元素封装组件,通过复用组件来提高代码的可维护性和复用性。同时,组件化的思想也使得团队协作更加高效,不同开发者可以独立开发、测试和维护自己负责的组件,最终组合成完整的应用程序。 总之,Vue组件封装复用是一种有效的开发方式,可以提高代码的可维护性和可复用性,同时也促进了团队协作和开发效率的提升。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值