Vue中关于组件的封装复用

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

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

流程：

封装组件
导入已经封装好的组件
在使用页面注册被使用组件
使用已封装好的组件

示例：
编写子组件

<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>

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

Vue中关于组件的封装复用

猜你喜欢