Vue组件-自定义局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>39-Vue组件-自定义局部组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.自定义全局组件特点
在任何一个Vue实例控制的区域中都可以使用
2.自定义局部组件特点
只能在自定义的那个Vue实例控制的区域中可以使用
3.如何自定义一个局部组件
在vue实例中新增components: {}
在{}中通过key/vue形式注册组件
components:{
abc: {}
}
-->
<!--这里就是MVVM中的View-->
<div id="app1">
<abc></abc>
</div>
<div id="app2">
<abc></abc>
</div>
<template id="info">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
</template>
<script>
/*
// 自定义全局组件
Vue.component("abc", {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info"
});
*/
// 这里就是MVVM中的View Model
let vue1 = new Vue({
el: '#app1',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
}
});
// 这里就是MVVM中的View Model
let vue2 = new Vue({
el: '#app2',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
"abc": {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info"
}
}
});
</script>
</body>
</html><< 上一篇
下一篇 >>