路飞-全局组件
全局组件
概念：
概念：所有实例都能用全局组件。
详细：全局组件只需要创建和渲染，只要在挂在点内都可以渲染，同局部组件一样每个组件都有自己的名称空间，需要注意的是全局组件必须写在Vue实例创建之前，才在该根元素下面生效；
局部组件的使用流程：
1 创建局部组件》2 注册在某一个跟组件中》3 渲染
全局组件的使用流程：
1 创建全部组件==》2 渲染
全局组件与全局组建的区别：
1 全局组件创建后无需注册到其他组件中。
2 全部组件在任何根组件中都可以使用，局部组件只可以在注册的根组件中使用
全局组件与局部组件的相同点：
1 渲染时每个全局组件标签也都有自己的名称空间。
// 创建全局组件，通过 Vue.component('组件名', 组件对象主体);
Vue.component('gTag', {
template: `
<p style="color:red;">
<span @click="action">{{ num }}</span>
</p>
`,
data () {
// 每次渲染全局组件的时候，都会有自己的名称空间，同局部组件一样也实现了数据隔离
return {
num: 0
}
},
methods: {
action() {
this.num++;
}
}
}
详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<!--<p-tag></p-tag>-->
<!--<p-tag></p-tag>-->
<g-tag></g-tag> <!-- 只要是vue的挂载点内都有效果-->
<p-tag></p-tag> <!-- 有效 因为p-tag在 #app中注册过-->
</div>
<div id="zz">
<g-tag></g-tag> <!-- 只要是vue的挂载点内都有效果-->
<p-tag></p-tag> <!--无效 因为p-tag只在 #app中注册过 -->
</div>
<g-tag></g-tag> <!-- 不在vue的挂载点内没有效果-->
</body>
<script src="js/vue.js"></script>
<script>
// 局部组件
let pTag = {
template: `
<p>
<span @click="action">{{ num }}</span>
</p>
`,
data () {
return {
num: 0
}
},
methods: {
action() {
this.num++;
}
}
};
// 创建全局组件，通过 Vue.component('组件名', 组件对象主体);
Vue.component('gTag', {
template: `
<p style="color:red;">
<span @click="action">{{ num }}</span>
</p>
`,
data () {
// 每次渲染全局组件的时候，都会有自己的名称空间，同局部组件一样也实现了数据隔离
return {
num: 0
}
},
methods: {
action() {
this.num++;
}
}
}
);
// 根组件 #app
new Vue({
el: '#app',
components: {
pTag,
}
});
// 跟组件 #zz
new Vue({
el: '#zz',
components: {
// pTag,
}
})
</script>
</html>
