- base assembly - sub-assembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app1">
<!-- 只能在 app1 的模板中使用 local-component 组件 -->
<local-component></local-component>
</div>
<div id="app2">
<!-- 不能在 app2 的模板中使用 local-component 组件，否则会报错 -->
<!-- <local-component></local-component> -->
</div>
<script src="./vue.js"></script>
<script>
// 1. 使用 Vue.extend() 创建组件的构造函数
const LocalComponent = Vue.extend({
data: function () {
return {
message: '局部组件的数据'
}
},
template: '<div><h2>{{message}}</h2></div>'
});
const app1 = new Vue({
el: '#app1',
data: {
mesage: 'app1根组件的数据'
},
// 2. 将 LocalComponent 注册成根组件 app1 的子组件
components: {
'local-component': LocalComponent
}
});
const app2 = new Vue({
el: '#app2',
data: {
mesage: 'app2根组件的数据'
}
});
</script>
</body>
</html>
Shorthand local assembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app1">
<!-- 只能在 app1 的模板中使用 local-component 组件 -->
<local-component></local-component>
</div>
<script src="./vue.js"></script>
<script>
// 未简写之前：
// const LocalComponent = Vue.extend({
// data: function () {
// return {
// message: '局部组件的数据'
// }
// },
// template: '<div><h2>{{message}}</h2></div>'
// });
// const app1 = new Vue({
// el: '#app1',
// data: {
// mesage: 'app1根组件的数据'
// },
// components: {
// 'local-component': LocalComponent
// }
// });
// 简写方式一：
// const app1 = new Vue({
// el: '#app1',
// data: {
// mesage: 'app1根组件的数据'
// },
// components: {
// 'local-component': Vue.extend({
// data: function () {
// return {
// message: '局部组件的数据'
// }
// },
// template: '<div><h2>{{message}}</h2></div>'
// })
// }
// });
// 简写方式二：
const app1 = new Vue({
el: '#app1',
data: {
mesage: 'app1根组件的数据'
},
components: {
'local-component': {
data: function () {
return {
message: '局部组件的数据'
}
},
template: '<div><h2>{{message}}</h2></div>'
}
}
});
</script>
</body>
</html>
