版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82733976
<div id="enjoy">
<my-div></my-div>
</div>
<template id="my_div">
<!--用-->
<!--
<div>hello world!</div>
<input type="date">
会报错,要像下面外用div包装好
-->
<div>
<div>hello world!</div>
<input type="date">
<p>{{message}}</p>
</div>
</template>
{
//1.实例化组件
Vue.component('my-div',{
//这次template是单引号(前面几次都是``)
template: '#my_div',
// data:{message:'hello girl!'}
// 会报错:必须以函数形式
// data 在 new Vue 中可以用上面格式
data(){
return{
message:'hello girl!'
}
}
});
new Vue({
el:'#enjoy',
})
}
data非共享和共享问题
共享:
不共享:
<div id="enjoy">
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
</div>
<!--注册一个组件-->
<template id="count">
<button @click="counter += 1">点击次数:{{counter}}</button>
</template>
{
// let data={
// counter:0
// };
//1.实例组件
Vue.component('my-btn', {
template: '#count',
data() {
//不会共享
return {
counter: 0
};
//会共享
// return data;
}
});
new Vue({
el: '#enjoy'
})
}