一、组件中的data
- 组件中也可以有自己的
data。 - 但是组件中的
data属性只能是一个函数方法（vue实例中的data可以为一个对象）。 - 这个方法内部必须返回一个object对象。
- 组件中的data数据和vue实例中的data数据使用方法一样。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<log></log>
</div>
<template id="templ">
<h2>{{msg}}</h2>
</template>
<script>
Vue.component('log', {
template: '#templ',
data () {
return {
msg: '组件中的data的数据'
}
}
});
var vm = new Vue({
el: "#app",
});
</script>
</body>
</html>
二、为什么组件中的data必须为一个函数
先看一个例子，我们把组件data中的函数返回的object对像设为一个外部的全局变量指向的对象，这样做，每个组件实例的data都会指向同一个对象（即这个全局变量指向的对象）。
每个组件实例都共用了一个object对象，会造成一个组件改变data中的数据同时会影响到其他对象实例。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<input type="button" @click="add" value="增加"/>
<h2>vue实例data中的数据：{{count}}</h2>
<hr />
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<template id="templ">
<div>
<input type="button" @click="add" value="增加"/>
<h2>组件data中的数据：{{count}}</h2>
</div>
</template>
<script>
var obj = {
count: 0
};
Vue.component('counter', {
template: '#templ',
data() {
return obj; //注意,这里的obj引用了外部的全局变量,指向一个对象
//即可以理解为,每一个组件实例的data都指向同一个对象
//这会造成组件之间改变data数据会相互影响(和data是一个对象而不是函数一个意思)
},
methods: {
add() {
this.count++;
}
}
});
var vm = new Vue({
el: "#app",
data:{ //vue实例中的data为一个对象没问题,此vue实例只会用在#app这一个内部
count:0
},
methods:{
add() {
this.count++;
}
}
});
</script>
</body>
</html>
我们想要的组件实例之间是相互独立的，data不会共享冲突的，所以
data应该指向一个函数，由函数返回一个自己的对象。这样，每定义一个新的组件实例，都会执行以下
data的函数，都会return一个新的对象，让组件实例之间的data数据不会冲突。所以上面的组件中的
data应该改为：
data() {
return {
count: 0
};
}
三、组件中的
methods和Vue实例中的一样，直接写在组件模板对象中，可以组件内调用。
用法和Vue实例一样。
也有生命周期钩子函数
created等。
网友评论