Vue.js之组件data的使用
官网链接：https://cn.vuejs.org/v2/guide/components.html参考链接：http://www.cnblogs.com/keepfool/p/5625583.html教学视频参考链接：https://ke.qq.com/webcourse/index.html#cid=320654&term_id=100380571&taid=2
·
官网链接：https://cn.vuejs.org/v2/guide/components.html
参考链接：http://www.cnblogs.com/keepfool/p/5625583.html
教学视频参考链接：
传入Vue构造器的多数选项也可以用在Vue.extend()或Vue.component()中。
Vue.js规定：在定义data选项时，必须使用函数
如果data选项指向某一个对象，这意味着所有的组件实例公用一个data。如下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<my-com1></my-com1>
<my-com1></my-com1>
<my-com1></my-com1>
<my-com1></my-com1>
</div>
<div id="app1"></div>
<script>
let data={
count:0
}
Vue.component('myCom1',{
template:"<h3 @click='count++'>这是组件哦~{{count}}</h3>",
data:function(){
return data
}
});
var vm=new Vue({
el:'#app'
})
new Vue({
el:'#app1',
template:'<my-com1></my-com1>'
})
</script>
</body>
</body>
</html>
运行结果如下所示：
点击任意一个组件，其它组件的数据都会发生变化。
因此，我们应当使用一个函数作为data选项，让这个函数返回一个新对象：
Vue.component('my-component', {
data: function(){
return {a : 1}
}
})如下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<my-com1></my-com1>
<my-com1></my-com1>
<my-com1></my-com1>
<my-com1></my-com1>
</div>
<div id="app1"></div>
<script>
let data={
count:0
}
Vue.component('myCom1',{
template:"<h3 @click='count++'>这是组件哦~{{count}}</h3>",
data:function(){
return {
count:0
}
}
});
var vm=new Vue({
el:'#app'
})
new Vue({
el:'#app1',
template:'<my-com1></my-com1>'
})
</script>
</body>
</body>
</html>
运行结果如下所示：
各个组件之间数据互不影响。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)