vue03

组件系统

一个完整的应用可将其 UI 划分为一系列功能独立的、可复用的模块，这些功能模块类似于基本的 html 元素（但比基本的 html 元素功能更完善）。

组件定义：

一个组件，就是拥有预定义选项的 Vue 实例（或app应用实例）

定义选项对象：

const MyComponentOption = {
    template: `
        <div>这是自定义的一个组件布局结构</div>
    `,
}

注册组件：

全局注册：

// 创建 app 实例
const app = Vue.createApp({})

// 调用 app.component(name, option) 注册全局组件
app.component('MyComponent', MyComponentOption)

// 挂载
app.mount('#app')

局部注册：

局部组件注册，是在父组件的选项对象中使用 components 字段进行注册：

// 定义选项对象：父组件选项
const FatherOption = {
    template: `
        <div>这是父组件中的布局</div>
        <son></son>
    `,
    // 局部注册组件
    components: {
        Son: SonOption,
    },
}

局部注册的组件，只能在注册它的父组件布局结构(template)中使用

渲染组件：

要渲染自定义的组件，使用组件名称作为自定义的标签名称。

需要注意的是，如果直接在html布局结构中书写，需要将自定义组件名称转换为短横线命名的规范进行使用。

如果是在 template 的字符串模板中渲染组件，可以不转换短横线命名

组件通信

就是在各组件间实现数据的传递

父子组件通信

• 父传子: 通过标签中的属性( props )进行传递 – 在父组件中渲染子组件的标签时，传递 key=value 结构的属性，在子组件的选项对象中使用 props 声明可接收的属性，子组件中 props 中声明的属性可以直接在子组件的模板视图中或子组件的成员方法中使用到。
• 子传父: 利用事件( $emit())，在子组件中触发父组件中绑定的事件进行数据传递--在父组件中渲染子组件标签时，绑定一个自定义的事件，在子组件中需要向父组件传递数据时，调用‘$emit(type, data)` 方法触发对应绑定的事件并传递数据.

跨组件层级通信

• 转换为父子组件通信
• Vue2.x - EventBus(事件总线)

EventBus 是利用 Vue 实例中有 $on()、$emit() 方法绑定事件、触发事件的特性。

在需要接收数据的组件中调用 $on() 注册自定义事件监听，在发送数据的组件中调用 $emit() 触发事件.