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的实例，但是他们的数据是两份的。

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