全局组件定义的四种方式

全局组件定义的四种方式

//   1.Vue.extend 和 Vue.component 搭配使用

        let login = Vue.extend({

            template: "<h2>登录1</h2>"

        })

        Vue.component("login", login)

        //   2.直接使用 Vue.component 方法

        Vue.component("login2", {

            template: "<h2>登录1</h2>"

        })

        // 3.将模板字符串，定义到script标签种：

        Vue.component("login3", {

            template: "#login3"

        })

        // 4.将模板字符串，定义到template标签种：

        Vue.component("login4",{

            template:"#login4"

        })

组件中展示数据和响应事件

在组件中，data需要被定义为一个方法，获取的是返回值，为了数据隔离，

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；