全局注册组件,组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用,局部注册的组件只能在指定父组件下使用,作用域小。
<template>
<div id="app">
<div>
<div>{{msg}}</div>
<child-one></child-one>
<child-two> </child-two>
<global-component></global-component>
</div>
<global-component></global-component>
</div>
</template>
<script>
import Vue from 'vue'
// 定义全局组件global-component,可以用于根节点下的任何地方
Vue.component('global-component', {
template: "<div>{{globalTitle}}</div>",
data: function() {
return {
globalTitle: '我是全局组件'
}
}
})
export default {
name: 'App',
data() {
return {
msg: '研究全局组件与局部组件'
}
},
//定义一个局部子组件
components: {
'child-one': {
template: '<div>{{oneTitle}}</div>',
//子组件的数据必须以函数返回值的形式定义,不可以使用对象定义
data: function() {
return {
oneTitle: '我是局部子组件child-one'
}
}
},
'child-two': {
template: '<div>{{towTitle}}</div>',
data: function() {
return {
towTitle: '我是局部子组件child-two'
}
}
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>