Vue——组件

使用

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

全局注册

语法

Vue.component('组件名', {选项})

实例

html代码<div id = 'app'>        //使用组件名标签        <my-header></my-header></div>js代码//注册my-header全局组件Vue.component('my-header',{    //template里面写组件内容    template: '<p>this is my-header</p>'})//跟组件new Vue({    el: '#app',})

运行结果

在页面中输出this is my-header。

局部注册

有时候，我们并不需要全局组件，只需要组件仅在另一个实例/组件的作用域中可用。

实例

js代码//声明myHeaderChild变量储存选项let myHeaderChild ={    template: '<p>I am  my header child</p>',}//声明myHeader变量储存选项let myHeader ={    template: '<p><my-header-child></my-header-child>this is my-header</p>',    //这里再次生成一个子组件    components: {        'my-header-child': myHeaderChild    }}//根组件new Vue({    el: '#app',    components: {        // "子组件my-header = 变量myHeader"        'my-header': myHeader    }})

data注意事项

它必须是函数。

通过return输出数据，数据不能是变量！

否则，同一个组件实例出来的对象，都指向同一个对象，任何一个实例对象发生改变，其他也会发生改变。

实例

html代码<div id = 'app'>        <my-header></my-header>        <my-header></my-header></div>js代码let myHeader ={    template: '<p>this is {{word}}</p>',    data: function(){        return {            word: 'my header'        }    }}

我们的html文档里，创建了2个my-header的实例，但是他们的数据是两份的。

一旦我们使用事件或其他方式，改变其中一个实例的值，另一个的值不受影响。