vueday09非单文件组件

最新推荐文章于 2024-07-13 19:55:20 发布

zhangzhangxinya

最新推荐文章于 2024-07-13 19:55:20 发布

阅读量52

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44931575/article/details/129499419

版权

本文详细介绍了Vue中非单文件组件的使用，包括组件的定义、注册、使用及注意事项。强调了组件名的规范，组件标签的写法，以及VueComponent在组件实例中的作用。还探讨了一个重要的内置关系，使组件实例可以访问到Vue的属性和方法。

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

非单文件组件

一、Vue中使用组件的三大步聚:

1.定义组件(创建组件)
2.注册组件
3.使用组件(写组件标签)

二、如何定义一个组件?

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，
区别如下:
1.e1不要写，为什么? 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 2.data必须写成函数data(){return{}}`，为什么? 避免组件被复用时，数据存在引用关系。
备注:使用template可以配置组件结构。

三、如何注册组件?

1.局部注册: 靠new Vue的时候传入`components`选项
2.全局注册: 靠`Vue.component`("组件名 ,组件)

四、编写组件标签

<school></school>

 <div id="root">
        <h1>{
  {msg}}</h1>
        <hr>
        <!-- 编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <hello></hello>
        <hr>
    </div>


<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    // 创建school组件
    const school = Vue.extend(