Vue组件的认识,创建并使用

1.组件数的认识

组件系统是 Vue 的一个重要概念,因为它是一种抽象的,允许我们使用其他的小型的,独立的和可以复用的组件构建大型应用.

几乎任意类型的组件页面都可以抽象成一棵组件树:

1.1 什么是组件

组件就是一段独立的,能代表页面某一部分的代码片段,拥有自己独立的数据,JavaScript脚本以及样式的标签.

1.2 组件化开发的优势

1. 提升开发效率
2. 方便重复使用
3. 便于协同开发
4. 更容易被管理和维护

1.3 创建组件的基本步骤

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件

1.4 组件的基本使用示例

通过一个简单的案例来了解组件的基本使用
使用Vue的component方法注册全局组件

 <div id="app">
    <!--3.使用组件构造器  -->
        <change></change>
    </div>
    <script>
        //1.创建组件构造器
        let myComponent = Vue.extend({
            // 配置对象
            // 因为组件没有挂载点,所以使用模板,只有一个根节点
            template:`
                 <div>
                    <p>你好呀!我是{{fruitName}}</p>
                    <button @click = "changeName">点击会变呐不信你点试试</button>
                 </div>
            `,
            data:function() {
                return{
                    fruitName:"芭乐"
                }
            },
            methods: {
                changeName() {
                    this.fruitName = "石榴";
                }
            }
        });

        //2.通过Component方法,将构造器扩展的构造函数创建组件实例
        Vue.component('change',myComponent);

        let vm = new Vue({
            el:"#app",
        })

    </script>

显示结果

1.5 理解组件的创建和注册

1. Vue.extend()是 Vue 构造器扩展,调用 Vue.extend() 创建的是一个组件构造器,而不是具体的组件实例;
2. Vue.extend() 构造器有一个选项对象,选项对象的 template 属性用于定义组件要渲染的 HTML 模板.
3. 使用Vue.component()注册组件时,需要提供 2 个参数, 第一个参数是组件名,第二个参数是组件构造器

Vue.compenent("组件名",组件构造器)

4. Vue.component() 方法内部会调用组件构造器,创建一个组件实例.
5. 组件应该挂载到某个 Vue 实例下,否则它不会生效.

1.6 Vue构造器扩展直接创建Vue实例

Vue.extend 方法相当于是对于原有的Vue 构造函数进行了扩展, 本质上核心还是Vue的构造函数,所以我们可以直接通过扩展的构造函数创建Vue实例

 <div id="app">
    <!--3.使用组件构造器  -->
    <change></change>
</div>
<script>
    //1.创建组件构造器
    let myComponent = Vue.extend({
        // 配置对象
        // 因为组件没有挂载点,所以使用模板,只有一个根节点
        template:`
                 <div>
                    <p>你好呀!我是{{fruitName}}</p>
                    <button @click = "changeName">点击会变呐不信你点试试</button>
                 </div>
            `,
        data:function() {
            return{
                fruitName:"芭乐"
            }
        },
        methods: {
            changeName() {
                this.fruitName = "石榴";
            }
        }
    });

    //2.通过Component方法,将构造器扩展的构造函数创建组件实例
    Vue.component('change',myComponent);

    let vm = new Vue({
        el:"#app",
    })

值得注意的是:

1. Vue组件其实也是 Vue 实例,只不过是没有挂载点,通过 template 处理的是需要渲染的 DOM
2. 但是组件实例必须要有一个名字.通过这个名字在 Vue 实例中使用,通过自定义标签的方式来使用组件.

在vue中,一个自定义标签 vue就会把它看成一个组件,vue可以给这些标签赋予一定的意义

1.7 直接通过选项对象创建组件

其实所有的Vue的组件同时也都是Vue的实例. 所以组件可接受的相同选项对象.
因此我们在创建组件的过程中也就没有必要每次都通过构造器扩展Vue构造函数
直接把构造器的选项对象作为第二个参数传递给Vue.component就可以

示例如下:

  <div id="app">
        <change></change>
    </div>
    <script>
        Vue.component("change", {
        // 配置对象
        // 因为组件没有挂载点,所以使用模板,只有一个根节点
        template: `
                 <div>
                    <p>你好呀!我是{{fruitName}}</p>
                    <button @click = "changeName">点击会变呐不信你点试试</button>
                 </div>
            `,
        data: function () {
            return {
                fruitName: "芭乐"
            }
        },
        methods: {
            changeName() {
                this.fruitName = "石榴";
            }
        }
    })
    let vm = new Vue({
       el:"#app"
    })
    </script>

我们更推荐使用这种方式创建组件

注意事项:

1. 组件名不能起和 HTML 合法标签相同的名字 ,如 div ;
2. 如果组件名和合法的标签名相同,那么会默认解析为合法的标签;
3. 因此会将 div 识别为普通的标签,而不是自定义标签,因此就不会被当成组件处理, 同时还会报错

1.8 组件的分类

1. 全局组件:声明一次可以在任何地方使用
2. 局部组件:必须说明这个组件属于谁

2. 全局组件

通过刚才的是,我们对组件应该已经有了一定的了解.

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。

2.1 全局组件的创建

通过 Vue.component 方法注册全局组件, 组件名称建议使用大驼峰命名

    <script >
        //在JS中使用组件时推荐使用大驼峰命名
        //在html中跟更推荐使用连字符
        Vue.component('MyCom',{
            template:`
                <div>
                <p>
                    {{this.name}}今年{{this.age}}岁了
                </p>
                </div>
            `,
            data: function () {
                return {
                    name: "why",
                    age: 19,
                }
            }
        })
    </script>

2.2 创建多个Vue实例

// 实例一
new Vue({
    el:"#app-one",
})

// 实例二
new Vue({
    el:"#app-two",
})

2.3在多个Vue实例中使用全局组件

    <div id="app-one">
        <!--在html中推荐使用连字符-->
        <my-com></my-com>
        <!--大写会被自动解析为小写,而且会报错-->
        <MyCom></MyCom>
    </div>
    <div id="app-two">
        <!-- 如果自定义标签里面没有嵌套内容可以写成单标签的形式 -->
        <my-com />
    </div>

2.4 注意事项

我们在注册组件的时候使用哪个的组件名是一个驼峰式的写法,此时使用组件时使用驼峰式命名会报错,因为 html 不能识别大小写. 会将你写的识别为这样就找不到组件了,因此会在控制台报错
<MyCom></MyCom>自动被解析为小写

报错信息如下:

但是我们可以在定义组件的使用使用连字符的方式定义组件名

<div id="app-two">
    <!-- 使用组件 -->
    <my-com />
</div>

<script>
    //  使用连字符定义组件名
    Vue.component('my-com', {   
        template: `
            <div>这是全局组件的内容</div>
        `
    })
    // Vue实例化
    new Vue({
        el:"#app",
    })
</script>

通过示例,我们了解了定义组件是使用连字符和驼峰命名都可以,但是在HTML标签里使用组件的使用一定只能写成连字符的方式.

关于组件名的几点说明

1. 虽然在定义组件时我们可以使用连字符命名,但是不推荐,
2. 推荐的使用方式是,定义组件使用驼峰方式, 使用组件使用连字符方法.

3. 局部组件

有的时候我们并不希望组件在所有的实例中都能使用, 那么我们就可以将组件定义为局部组件

3.1 局部组件的使用步骤

1. 创建局部配置,
2. 注册局部组件
3. 使用局部组件

3.2 使用构造器创建并使用局部组件

使用构造器创建局部组件

<div id="app-one">
    <my-component></my-component>
</div>
<div id="app-two">
    <my-component></my-component>
</div>
<script >
    let MyComponent = Vue.extend({
        template:`
                <div>
                    <h3>你好,世界</h3>
                </div>
            `,
    })

    //MyComponent 组件只能在app-one中使用
    let vm1 = new Vue({
        el:"#app-one",
        components:({
            'MyComponent':MyComponent,
        })
    })

    let vm2 = new Vue({
        el:"#app-two"
    })
</script>

几点说明

1. 通过 Vue.extend() 方法创建 Vue 构造器
2. 在实例化 Vue 对象的时候,通过 components 选项将构造器直接创建为局部组件
3. components 选项的值是一个对象,对象的属性是组件的名称,值是将要创建为组件的构造器或选项对象.
4. 没有注册局部组件的实例对象是不能使用其他实例的局部组件

因此,当我们在 app-two 中使用 MyConponent 组件的时候就会报错.

3.3 直接通过选项对象来创建局部组件

<div id="app-one">
    <my-component></my-component>
</div>
<div id="app-two">
    <my-com></my-com>
</div>
<script >
  let MyComponent = {
      template:`
        <div>
         <h2>你好 世界</h2>
        </div>
      `
  }

  let MyCom = {
      template:`
        <div>
         <h2>hello world</h2>
        </div>
      `
  }
  let vm1 = new Vue({
      el:"#app-one",
      components:{
          "MyComponent":MyComponent,
      }
  })

  let vm2 = new Vue({
      el:"#app-two",
      components:{
          "MyCom":MyCom,
      }
  })
</script>

通过对比我们就会发现直接将选项对象注册为局部组件要来的简单一点,所以推荐使用选项对象创建组件的方式,无论是全局组件还是局部组件

这种使用选项对象直接注册为组件的方式被称作为组件注册语法糖