<div id="app">
<my-com3></my-com3>
</div>
<div id="app2">
<myself></myself>
<my-com3></my-com3>
</div>
<template id="tmpl">
<div>
<h1>回顾一下之前创建组件的方式,
这个组件在全局都可以用,
是通过Vue.component创建的组件
</h1>
</div>
</template>
<template id="tmpl2">
<h2>
现在学习一下定义的私有组件,
只能在#app2当中使用,
之前定义的都是全局的,
</h2>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('myCom3',{
template: '#tmpl'
})
//创建vue实例
var vm = new Vue({
el: '#app',
data:{},
methods:{}
})
var vm1 = new Vue({
el: '#app2',
data: {},
components:{
//定义实例内部私有组件
myself: {
template:'#tmpl2'
}
}
})
</script>
Vue基础系列--Vue私有组件创建
最新推荐文章于 2024-05-06 11:18:29 发布