这里写目录标题
- [ 1 ] Vue对象的component方法,为什么不能用如下方法注册组件?
const app = new Vue({
el: '#app',
data: {
},
});
app.prototype.component('my-cpn', cpnC);
- [ 2 ] 组件能否访问Vue实例内部data里的数据-------不能
<div id='app'>
<!-- 这里组件里写message,不生效 -->
<cpn2>{{message}}</cpn2>
</div>
<script>
//1.利用Vue的extend方法, 创建组件构造器对象; template代表我们自定义组建的模板
const cpnC1 = Vue.extend({
template: `
<div id=''>
<h2>标题</h2>
<h3>这是1111组件</h3>
</div>`
});
const cpnC2 = Vue.extend({
template: `
<div id=''>
<h2>标题</h2>
<h3>这是22222组件</h3>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC1,
}
});
//2. 利用Vue的component方法注册全局组件
// Vue.component('my-cpn', cpnC);
//注意:组件必须使用在绑定的实例内,所以下面这一步也不能少
const app = new Vue({
el: '#app',
data: {
message: 'hello',
},
//或者在实例里面注册局部组件
components: {
// cpn2: cpnC2,
// cpn1: cpnC1,
'cpn2': cpnC2,
}
});
3. 组件内部data属性,为什么必须是函数格式
2里面说到组件不能访问Vue实例内的data数据,那么组件就要有自己存数据的地方。组件自己有个data属性,但是为什么这个data属性必须是函数呢?而且此data函数返回一个存放数据的对象。
原因就是:如果data是对象名称,data={}的格式,那么data是一个引用,而写成函数格式 data(){return{}}, 那么每次调用data时会返回一个新对象;
举个栗子:
<div id='app'>
<!-- 这里复制好多个组件 -->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpnC">
<div>
<h2>当前计数:{{counter}}</h2>
<button @click='increment'>+</button>
<button @click='decrement'>-</button>
</div>
</template>
<script>
//1.注册组件
Vue.component('cpn', {
template: '#cpnC',
data() {
return {
counter: 0,
}
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
},
});
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
},
});
console.log(app);
</script>
上面写了个简单的计数器组件,同时复制多个。如果data是函数,意味着每个组件的数据都是一个新返回值,在内存里是相互独立的,改变一个计数器的±时,不会对其他计数器产生影响: