Vuejs——（８）Vuejs组件的定义

怼烎@ 2022-07-18 01:52 351阅读 0赞

**本篇资料来于官方文档：**

**http://cn.vuejs.org/guide/components.html**

**本文是在官方文档的基础上，更加细致的说明，代码更多更全。**

**简单来说，更适合新手阅读**

**（二十五）组件的定义**

### **①组件的作用：** ###

【1】扩展HTML元素，封装可重用的代码；

【2】组件是自定义元素，Vuejs的编译器可以为其添加特殊的功能；

【3】某些情况下，组件可以是原生HTML元素的形式，以is的方式扩展。

### **②写一个标准的组件：** ###

分为以下几步：

【1】挂载组件的地方，需要是Vue实例所渲染的html元素，具体来说，比如上面的<div id=”app”></div>这样的html元素及他的子节点；

【2】定义一个组件，用

var 变量名 = Vue.extend(\{template:”这里是html的模板内容”\})

这样的形式创建，例如：

//定义一个组件
    var btn = Vue.extend({
        template: "<button>这是一个按钮</button>"
    })

【3】将定义的组件注册到Vue实例上，这会让指定标签，被组件的内容所替代。

如代码：

//注册他到Vue实例上
    Vue.component("add-button", btn);

具体而言，每一个以下这样的标签（在Vue的根实例范围内的）

<add-button></add-button>

会被

<button>这是一个按钮</button>

所替代。

【4】以上方法是全局注册（每个Vue实例的add-button标签都会被我们定义的所替代）；

解决办法是局部注册。

如代码：（这是是设置了template属性，也可以在没有这个属性的时候，在<div id=”app”></div>标签内放置<add-button></add-button>标签

<div id="app">
    </div>
    <script>
        //定义一个组件
        var btn = Vue.extend({
            template: "<button>这是一个按钮</button>"
        })
    
        Vue.component("add-button", btn);
    
        //创建根实例，也就是说让Vue对这个根生效
        var vm = new Vue({
            el: '#app',
            template: "<add-button></add-button>"
        });
    </script>

### **③局部注册组件：** ###

简单来说，只对这一个Vue实例生效，具体做法是，在注册那一步，跳过；

然后在声明Vue实例的时候，将添加到components这个属性中（他是一个对象，以KV形式放置）（注意，这个单词多一个s）

如代码：

<div id="app">
    </div>
    <script>
        //定义一个组件
        var btn = Vue.extend({
            template: "<button>这是一个按钮</button>"
        })
    
        //创建根实例，也就是说让Vue对这个根生效
        var vm = new Vue({
            el: '#app',
            template: "<add-button></add-button>",
            components: {
                "add-button": btn
            }
        });
    </script>

**注：**

根据官方教程，这种方法（指局部注册），也适用于其他资源，比如**指令**、**过滤器**和**过渡**。

### **④步骤简化：** ###

【1】定义组件和注册组件结合起来一步完成：

//定义一个组件
    Vue.component("add-button", {
        template: "<button>这是一个按钮</button>"
    });

【2】局部注册时，定义和注册一步完成：

//创建根实例，也就是说让Vue对这个根生效
    var vm = new Vue({
        el: '#app',
        template: "<add-button></add-button>",
        components: {
            "add-button": {
                template: "<button>这是一个按钮</button>"
            }
        }
    });

### **⑤data属性** ###

直接给组件添加data属性是不可以的（无效）；

原因在于，假如这么干，那么组件的data属性有可能是一个对象，而这个对象也有可能是外部传入的（例如先声明一个对象，然后这个对象作为data的值），可能导致这个组件的所有副本，都共享一个对象（那个外部传入的），这显然是不对的。

因此，data属性应该是一个函数，然后有一个返回值，这个返回值作为data属性的值。

且这个返回值应该是一个全新的对象（即深度复制的，避免多个组件共享一个对象）；

如代码：

var vm = new Vue({
        el: '#app',
        template: "<add-button></add-button>",
        components: {
            "add-button": {
                template: "<button>这是一个按钮{
       {btn}}</button>",
                data: function () {
                    return {btn: "123"};
                }
            }
        }
    });

另外，假如这样的话，btn的值是一样的（因为他们实际上还是共享了一个对象）

<div id="app">
    </div>
    <div id="app2">
    </div>
    <script>
        var obj = {btn: "123"};
        var vm = new Vue({
            el: '#app',
            template: "<add-button></add-button>",
            components: {
                "add-button": {
                    template: "<button>这是一个按钮{
       {btn}}</button>",
                    data: function () {
                        return obj;
                    }
                }
            }
        });
    
        obj.btn = "456";
        var vm2 = new Vue({
            el: '#app2',
            template: "<add-button></add-button>",
            components: {
                "add-button": {
                    template: "<button>这是一个按钮{
       {btn}}</button>",
                    data: function () {
                        return obj;
                    }
                }
            }
        });
    </script>

注：

el属性用在Vue.extend()中时，也须是一个函数。

###  ###

### **⑥is特性：** ###

【1】按照官方教程，一些HTML元素对什么元素可以放在它之中是有限制的；

简单来说，如果我要在table标签内复用某个组件，这个组件展开后是tr标签，但是展开前不是，那么就无法正常运行（被放置在table标签内）；

如代码（**错误写法，会渲染错误**）：

<div id="app">
        <table>
            <tr>
                <td>索引</td>
                <td>ID</td>
                <td>说明</td>
            </tr>
            <thetr v-for="i in items" v-bind:id="i" :index="$index"></thetr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [1, 2, 3, 4]
            },
            methods: {
                toknowchildren: function () {   //切换组件显示
                    console.log(this.$children);
                }
            },
            components: {
                thetr: { //第一个子组件
                    template: "<tr>" +
                    "<td>{
       {index}}</td>" +
                    "<td>{
       {id}}</td>" +
                    "<td>这里是子组件</td>" +
                    "</tr>",
                    props: ['id', 'index']
                }
            }
        });
    </script>

渲染结果如下：

<div id="app">
        <tr><td>0</td><td>1</td><td>这里是子组件</td></tr>
        <tr><td>1</td><td>2</td><td>这里是子组件</td></tr>
        <tr><td>2</td><td>3</td><td>这里是子组件</td></tr>
        <tr><td>3</td><td>4</td><td>这里是子组件</td></tr>
        <table>
            <tbody>
            <tr>
                <td>索引</td>
                <td>ID</td>
                <td>说明</td>
            </tr>
            </tbody>
        </table>
    </div>

可以明显发现，内容没有被放在table之中。

正确写法如下：

<div id="app">
        <button @click="toknowchildren">点击让子组件显示</button>
        <table>
            <tr>
                <td>索引</td>
                <td>ID</td>
                <td>说明</td>
            </tr>
            <tr is="thetr" v-for="i in items" v-bind:id="i" :index="$index"></tr>
        </table>
    </div>