Vue.js基础-09-组件（Component）

1. 注册组件

1.1 创建实例时注册

语法示例

• 在实例中注册组件

      components: {
        tagName: {options,},
      }

tagName 为组件名，options 为配置选项。

• 调用组件

示例

完整示例

1.2 在实例外注册组件

语法示例

• 注册组件

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。

完整示例

1.3 在变量中定义组件选项

完整示例

2. 接收父组件传来属性（Prop）

子组件用它来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

2.1 基本使用

语法示例

        props: ["message"],

完整示例

2.2 动态绑定

用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

• 结果显示

2.3 绑定列表

---

image.png