vue全局组件

全局组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

全局注册

全局组件不需要在vue实例里面注册可以直接使用

    <div id="app">
        <my-component></my-component>
    </div>

Vue.component('my-component', {
    // 选项
    template:"<div>{{msg}}</div>",
    data(){
        return {
             msg:"BGG神教，一统江湖",
        }
     }
})
var app = new Vue({
    el:"#app",
    data:{},
})

注意:

1. 注册全局组件的代码必须写在vue实例化之前。
2. 组件内部的data必须是函数。
3. 模板的四种写法

• 普通的字符串 "< div >{{msg}}< /div >",注意有换行要时在行末转义""。 如下:

template:"\
    <div>\
        <p>字符串模板</p>\
    </div>\
",  

• es6字符串模板，反单引号。
• 通过script标签的type=“text/x-template”,给script设置id属性。
• 正常html中 设置template标签，注意要多嵌套一层模板最外div，给template标签设置id属性。