vue（组件的data）

最新推荐文章于 2023-10-10 10:39:10 发布

小青龙8085

最新推荐文章于 2023-10-10 10:39:10 发布

阅读量217

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103339548

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

组件里面不能访问vue实例里面的数据。组件对象里面也有data和methods属性。

1.组件data里面要这样写，而不是这样写

如图，obj1,obj2,obj3调用函数abc（），而函数返回的是一个obj对象，此时变量obj1,obj2,obj3所指向的内存地址是相同的都是obj。换句话说修改obj1的name的时候，obj2,obj3的name也发生了同样的变化。

若abc（）函数这样写,则obj1,obj2,obj3所指向的对象是不同的，因此为了使每个组件里面的东西互不影响里面要直接返回一个对象，而不是返回定义过的对象。

2.组件里面的data要写成函数，如果写成对象的形式的话，当修改一个组件的内容时，另一个组件的该内容也会发生相同的变化

下面举一个案例

运行结果

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
        </div> 

		<template id="cpn">
			<div>
				<h2>第{{count}}次</h2>
				<button @click="add()">+</button>
				<button @click="sub()">-</button>
			</div>
		</template>
		
        <script>
			Vue.component("cpn",{
				template:'#cpn',  //注意#号
				data(){
					return{
						count:0
					}
				},
				methods:{
					add(){
						this.count++;
					},
					sub(){
						this.count--;
					},
				}
			}),
            new Vue({
                el:"#root",
                data:{
					
                },
                methods:{
                   
                },
				computed:{	
					
				},
				filters:{   //过滤器
					
				}
            })
        </script>
    </body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue（组件的data）

组件里面不能访问vue实例里面的数据。组件对象里面也有data和methods属性。1.组件data里面要这样写，而不是这样写如图，obj1,obj2,obj3调用函数abc（），而函数返回的是一个obj对象，此时变量obj1,obj2,obj3所指向的内存地址是相同的都是obj。换句话说修改obj1的name的时候，obj2,obj3的name也发生了同样的变化。若abc（）函数...
复制链接

扫一扫