Vue组件

最新推荐文章于 2022-07-27 19:46:04 发布

X-77

最新推荐文章于 2022-07-27 19:46:04 发布

阅读量391

点赞数 1

分类专栏：前端进步亿点点文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45990864/article/details/122070993

版权

前端进步亿点点专栏收录该内容

34 篇文章 7 订阅

订阅专栏

在之前我们说过，Vue最强大的功能之一就是组件。那究竟什么是组件呢，我们一探究竟。

组件：实现应用中局部功能代码和资源的集合

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

在官网中提到了组件是可以复用的vue实例，说明组件接收的配置项是大致相同的，例如data、computed、watch、methods以及生命周期钩子等。但是像el这种根实例特有的选项组件是没有的。

简单来讲，vue实例就像是一个大哥，手底下带领着数十个组件小弟，而只有大哥才有决定权对谁服务。

那么组件到底应该怎么去用呢？

1.定义组件（创建组件）

使用Vue.extend(options)创建

注意：
1.不写el，组件由vm管理
2.data必须写成函数，避免组件被复用时，数据存在引用关系
3.使用template可以配置组件结构

const school = Vue.extend（options）可简写为 const school= options()

2.注册组件

局部注册： new Vue 时传入components选项
全局注册： Vue.component('组件名'，组件)

3.使用组件（写组件标签）

<组件名></组件名> 或者 <组件名/>

注意：不使用脚手架时，<组件名/>会导致后续组件不能渲染

关于组件名：

如果是一个单词组成：

1.全小写，例如：shool

2.首字母大写，例如：School

如果由多个单词组成：

1.kabab-case命名，例如：my-shool

2.CameCase命名，例如：MySchool（需要Vue脚手架支持）

如果vm中有多个组件，那么vm的工作量会非常大，于是组件中有一组件管理所有的子组件，而这个组件只负责和vm进行交流，那么这个组件我们一般命名为App组件。在这里就使用到了组件的嵌套，即一个组件中可以有子组件，所有的子组件都被该组件管理，不能越级管理。

例：组件的嵌套

<body>
    <div id="root"></div>
    <script>
        Vue.config.productionTip = false   //阻止 vue 在启动时生成生产提示。 

        // 注册学校组件
        const School = Vue.extend({
            name: 'shcool',
            template: `
            <div>
                <h2>学校名字:{{name}}</h2>
                <h2>学校地址:{{adress}}</h2>
            </div>
            `,
            data() {
                return {
                    name: "尚硅谷",
                    adress: "北京"
                }
            }
        })
        // 注册学生组件
        const Student = Vue.extend({
            name: 'Student',
            template: `
            <div>
                <h2>学生名字:{{name}}</h2>
                <h2>学生年龄:{{age}}</h2>
            </div>            
            `,
            data() {
                return {
                    name: '张三',
                    age: 18
                }
            }
        })
        const App = {
            name: 'App',
            template: `
            <div>
                <School></School>
                <Student></Student>
            </div>
            `,
            components: { School, Student }
        }

        const vm = new Vue({
            el: '#root',
            template: `<App></App>`,
            components: { App }
        })


    </script>
</body>

在这里案例中，是一个非单文件组件，还有单文件组件，即在这个.vue文件中只包含一个组件且包含这个组件中的所有html、css、js代码。但单文件组件需要脚手架的支持，在这里不多作探讨。

关于VueComponent

组件本质是名为VueCompoent的构造函数，且不算程序员定义的，是Vue.extend生成的。当我们创建组件时，Vue会帮我们生成一个组件实例对象。当我们每次调用Vue.extend时，返回的都是全新的VueComponent。

在VueComponent中的this指向它的实例对象，简称vc。

内置关系：