vuejs私有组件创建的方式
vuejs中的私有组件用components属性进行创建，下面的login是组件的名称，里面是个对象，所以可以创建多个组件。
var vm = new Vue({
el: '#main',
components: {
login: {
template: '#temp',
}
}
})然后创建模版
<template id="temp">
<h1>登录组件---{{msg}}</h1>
</template>最后在div内进行显示
<div id="main" v-cloak> <login></login> </div>
完整代码
<div id="main" v-cloak>
<login></login>
</div>
<template id="temp">
<h1>登录组件---{{msg}}</h1>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#main',
components: {
login: {
template: '#temp',
}
}
})
</script>在组件内还可以使用data和方法，它们和组件模版平级，值得说明的是这里面的data虽然是个属性，但是是以方法的形式存在。
<script>
var vm = new Vue({
el: '#main',
components: {
login: {
template: '#temp',
data() {
return {
msg: '组件中data '
}
},
methods: {}
}
}
})
</script>组件中的data数据也可以用{{}}在组件的模版里面显示
<template id="temp">
<h1>登录组件---{{msg}}</h1>
</template>相关文章：