vue3组件化开发常用API知识点总结

让我详细讲解一下“vue3组件化开发常用API知识点总结”的完整攻略。

一、组件化开发

1.1 Vue 组件基础

• 组件注册：调用 Vue.component 方法注册一个全局组件
• 组件使用：在模板中使用组件标签名
• 组件通信：通过 props 和自定义事件实现父子组件通信

示例代码：

<template>
  <my-component :name="name" @click="handleClick"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue'  // 组件引入

export default {
  components: { 
    'my-component': MyComponent  // 组件注册
  },
  data() {
    return {
      name: 'Vue'
    }
  },
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="$emit('click')">Click me</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

1.2 Vue 组件高级

• 组件复用：通过 mixins 实现组件复用
• 插槽：通过插槽实现父子组件之间的内容分发
• 动态组件：通过 is 属性实现动态组件的切换

示例代码：

<template>
  <my-component></my-component>
  <my-other-component></my-other-component>
</template>

<script>
import myComponentMixin from './myComponentMixin.js'  // mixin 引入

export default {
  mixins: [myComponentMixin],  // mixin 使用
  components: {
    'my-component': {
      template: `
        <div>
          <h2>我是 MyComponent</h2>
          <slot></slot>
        </div>
      `
    },
    'my-other-component': {
      data() {
        return {
          componentName: 'my-component'
        }
      },
      template: `
        <div>
          <h2>我是 MyOtherComponent</h2>
          <p>现在是展示 {{ componentName }}</p>
          <button @click="toggleComponent">切换组件</button>
          <component :is="componentName"></component>
        </div>
      `,
      methods: {
        toggleComponent() {
          this.componentName = this.componentName === 'my-component' ? 'other-component' : 'my-component'
        }
      },
      components: {
        'other-component': {
          template: `
            <div>
              <h2>我是 OtherComponent</h2>
              <slot></slot>
            </div>
          `
        }
      }
    }
  }
}
</script>

export default {
  data() {
    return {
      message: 'I am a mixin'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    }
  }
}

二、Vue3 组件化开发

2.1 Vue3 组件基础

• 组件定义：通过 defineComponent 定义一个 Vue3 组件
• 组件引入：通过 import 引入组件
• 组件使用：在模板中使用组件标签名
• 组件通信：通过 props 和 emit 方法实现父子组件通信

示例代码：

<template>
  <my-component :name="name" @click="handleClick"></my-component>
</template>

<script>
import { defineComponent } from 'vue'
import MyComponent from './MyComponent.vue'  // 组件引入

export default defineComponent({
  components: { 
    'my-component': MyComponent  // 组件注册
  },
  data() {
    return {
      name: 'Vue'
    }
  },
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
})
</script>

<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="$emit('click')">Click me</button>
  </div>
</template>

<script>
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    name: {
      type: String as PropType<string>
    }
  }
})
</script>

2.2 Vue3 组件高级

• 组件复用：通过 setup 函数和 Composition API 实现组件复用
• 插槽：通过 slot 和 v-slot 实现父子组件之间的内容分发
• teleport：通过 teleport 实现将组件渲染到指定的 DOM 节点中

示例代码：

<template>
  <my-component></my-component>
  <my-other-component></my-other-component>
</template>

<script>
import { defineComponent } from 'vue'
import myComponentMixin from './myComponentMixin.js'  // mixin 引入

export default defineComponent({
  mixins: [myComponentMixin],  // mixin 使用
  components: {
    'my-component': {
      setup() {
        return {
          message: 'I am a component instance'
        }
      },
      template: `
        <div>
          <h2>我是 MyComponent</h2>
          <slot></slot>
          <button @click="showMessage">Show message</button>
        </div>
      `
    },
    'my-other-component': {
      data() {
        return {
          componentName: 'my-component'
        }
      },
      template: `
        <div>
          <h2>我是 MyOtherComponent</h2>
          <p>现在是展示 {{ componentName }}</p>
          <button @click="toggleComponent">切换组件</button>
          <teleport to="body">
            <component :is="componentName"></component>
          </teleport>
        </div>
      `,
      methods: {
        toggleComponent() {
          this.componentName = this.componentName === 'my-component' ? 'other-component' : 'my-component'
        }
      },
      components: {
        'other-component': {
          template: `
            <div>
              <h2>我是 OtherComponent</h2>
              <template v-slot:default>
                <p>这是 OtherComponent 的内容</p>
              </template>
            </div>
          `
        }
      }
    }
  }
})
</script>

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'I am a mixin'
    })

    const showMessage = () => {
      console.log(state.message)
    }

    return {
      state,
      showMessage
    }
  }
}

以上就是“vue3组件化开发常用API知识点总结”的完整攻略，希望能对你有所帮助。