Vue组件的配置、注册和使用

最新推荐文章于 2024-09-02 15:51:54 发布

webjxb

最新推荐文章于 2024-09-02 15:51:54 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43659504/article/details/90609913

版权

本文详细介绍了Vue.js中组件的配置、注册和使用方法，包括Vue.extend()和Vue(options)的区别，组件的全局注册和局部注册，以及模板的定义。还探讨了组件嵌套和使用时需要注意的规则，如在特定标签内使用is属性绑定组件，并提供了多个示例代码进行演示。

摘要由CSDN通过智能技术生成

Vue组件的配置、注册和使用

Vue.js通过Vue.extend() 方法来扩展组件的使用
Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件
Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册
组件的注册有两种形式
- 全局注册
- 局部注册
组件必须先注册在使用
组件中的模板需要使用一个叫做template的配置项表示
组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中
template组件中有且仅有一个根元素
组件使用时有规则的：
比如特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题

解决：在直接子元素身上，通过 is 属性来绑定一个组件

举例：

html

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <!-- <Hello></Hello>  这么写有问题-->
        <tr is = "Hello"></tr>
    </table>
    <!-- 配置组件 -->
    <template id="hello">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
    </template<