Vue核心知识-Vue的组件之组件的定义

川长思鸟来 2022-10-01 07:56 168阅读 0赞

## 最简单的声明组件 ##

import Vue from 'vue'
    
    new Vue({
      el: '#root',
      template: '<div>123</div>'
    })
    复制代码

## 全局注册组件 ##

官方推荐，定义组件名，**大写开头以及驼峰式**命名，在模板中使用时，使用**小写连接符**的方式。

const component = {
      template: '<div>This is component</div>'
    }
    
    Vue.component('CompOne', component)
    
    new Vue({
      el: '#root',
      template: '<comp-one></comp-one>'
    })
    复制代码

## 局部注册组件 ##

通过组件 options 中的 components 选项来做。

const component = {
      template: '<div>This is component</div>'
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      template: '<comp-one></comp-one>'
    })
    
    复制代码

## 定义组件时，使用 data ##

定义组件时，使用 data 定义组件内数据时（不是 new Vue() 这种情况），**data 需要改成 function**，并返回一个**单独的对象**，不要使用全局的对象来做。

const component = {
      template: '<div>{
         {text}}</div>',
      data () {
        return {
          text: 123
        }
      }
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      template: '<comp-one></comp-one>'
    })
    复制代码

如果不是单独的对象，组件复用时，数据会共用。如下例中，text 数据是共用的。

const data = {
      text: 0
    }
    const component = {
      template: `
        <div>
          <input type="text" v-model="text"/>
        </div>
      `,
      data () {
        return data
      }
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      template: `
        <div>
          <comp-one></comp-one>
          <comp-one></comp-one>
        </div>
      `
    })
    
    复制代码

## 定义组件时，使用 props ##

props 定义组件在外部使用时一些可配置的行为。

### props 类型检查 ###

指定传入数据类型。

如果不使用绑定模式，直接使用 active="true"，传入组件的就是字符串，vue 会发出警告。

const component = {
      props: {
        active: Boolean
      },
      template: `
        <div>
          <input type="text" v-model="text"/>
          <span v-show="active">see me if active</span>
        </div>
      `,
      data () {
        return {
          text: 0
        }
      }
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      template: `
        <div>
          <comp-one :active="true"></comp-one>
          <comp-one :active="false"></comp-one>
        </div>
      `
    })
    复制代码

### props 命名 ###

命名时使用驼峰式命名

在模板中使用时，使用小写连接符的方式(在模板中也可以使用驼峰式写法，与团队成员协商)。

const component = {
      props: {
        propOne: String
      },
      template: `
        <div>
          <span>{
         {propOne}}</span>
        </div>
      `
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      template: `
        <div>
          <comp-one prop-one="text1"></comp-one>
          <comp-one propOne="text2"></comp-one>
        </div>
      `
    })
    复制代码

### 不要子组件中改 props ###

直接改 props 能够修改成功，但是 vue 会警告，在组件内部主动改 props 是不正确的，props 是外部组件用来约束子组件展示行为的，所以有违初衷约束。

const component = {
      props: {
        propOne: String
      },
      template: `
        <div>
          <span>{
         {propOne}}</span>
        </div>
      `,
      mounted () {
        this.propOne = 'inner content'
      }
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      template: `
        <div>
          <comp-one prop-one="text1"></comp-one>
          <comp-one propOne="text2"></comp-one>
        </div>
      `
    })
    复制代码

### 修改 props ###

子组件触发事件，通知父组件来改 props。

#### 通过 props 传方法 ####

如下，点击 text1 多一个 1

const component = {
      props: {
        propOne: String,
        onChange: Function
      },
      template: `
        <div>
          <span @click="handleChange">{
         {propOne}}</span>
        </div>
      `,
      data () {
        return {
          text: 0
        }
      },
      methods: {
        handleChange () {
          this.onChange()
        }
      }
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      data: {
        prop1: 'text1'
      },
      methods: {
        handleChange () {
          this.prop1 += 1
        }
      },
      template: `
        <div>
          <comp-one :active="true" :prop-one="prop1" :on-change="handleChange"></comp-one>
        </div>
      `
    })
    复制代码

#### 通过 `$emit` ####

通过 `$emit` 通知父组件的方式，比较常用。

const component = {
      props: {
        propOne: String
      },
      template: `
        <div>
          <span @click="handleChange">{
         {propOne}}</span>
        </div>
      `,
      data () {
        return {
          text: 0
        }
      },
      methods: {
        handleChange () {
          this.$emit('change')
        }
      }
    }
    
    new Vue({
      components: {
        CompOne: component
      },
      el: '#root',
      data: {
        prop1: 'text1'
      },
      methods: {
        handleChange () {
          this.prop1 += 1
        }
      },
      mounted () {
        console.log(this.$refs.comp1)
      },
      template: `
        <div>
          <comp-one ref="comp1" :active="true" :prop-one="prop1" @change="handleChange"></comp-one>
        </div>
      `
    })
    复制代码

### props 的数据验证 ###

#### 不验证 ####

这样简单，但不严谨

props: ['active', 'propOne']
    复制代码

#### 验证数据类型 ####

props: {
        active: {
          type: Boolean
        },
        propOne: String // 简洁写法
      },
    复制代码

#### required ####

设置 `required: true` ，则 active 必须要传，否则 vue 警告。

props: {
        active: {
          type: Boolean,
          require: true 
        }
      },
    复制代码

#### default ####

default 默认是 false，如果设置为 true，当我们没有传 active 时，它会设置 active 为 true。

default 和 requied 不会同时使用，因为效果冲突。