Vuejs——(8)Vuejs组件的定义

来源:互联网 发布:2016中韩双边贸易数据 编辑:程序博客网 时间:2024/05/24 04:14

本篇资料来于官方文档:

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>


0 0
原创粉丝点击