组件中的变量定义

最新推荐文章于 2022-10-08 17:00:20 发布

victor-维克特

最新推荐文章于 2022-10-08 17:00:20 发布

阅读量649

点赞数

分类专栏：前端框架vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qinqinde123/article/details/120172021

版权

前端框架vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

一. vue实例中的变量只能在vue托管的代码中使用，不能在组件中使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>{{message}}</h3>
			<my-cmp></my-cmp>
		</div>
	</body>

	<template id="cpn">
		<div>
			<h2>我是标题</h2>
			<p>我是内容不不不</p>
			<h3>{{message}}</h3>
		</div>
	</template>
	
	<script type="application/javascript" src="js/vue.js"></script>
	<script>
		
		Vue.component("my-cmp", {
			template: '#cpn'
		});
		
		const app = new Vue({
			el: "#app",
			components: {
				"my-cmp": {
					template: '#cpn'
				}
			},
			data: {
				message: "你好"
			}
		})
	</script>
</html>

在这里插入图片描述

二. 组件中定义变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>{{message01}}</h3>
			<my-cmp></my-cmp>
		</div>
	</body>

	<template id="cpn">
		<div>
			<h2>我是标题</h2>
			<p>我是内容不不不</p>
			<h3>{{message02}}</h3>
		</div>
	</template>
	
	<script type="application/javascript" src="js/vue.js"></script>
	<script>
		
		Vue.component("my-cmp", {
			template: '#cpn',
			data() {
				return {
					message02: "vue组件中的变量"
				}
			}
		});
		
		const app = new Vue({
			el: "#app",
			data: {
				message01: "vue实例中的变量"
			}
		})
	</script>
</html>

在这里插入图片描述

组件中定义变量为什么是个方法不是对象呢？

组件在任何模块中都可以被引用，在使用的过程中，如果组件定义的变量是个对象，那么一个模块修改了该对象，其他模块也跟着修改了。如果使用函数，每次返回的是一个新的实例，每个模块引用的过程中都是针对本身的实例做修改，不会影响到其他模块的实例。
在这里插入图片描述

victor-维克特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
组件中的变量定义

一. vue实例中的变量只能在vue托管的代码中使用，不能在组件中使用。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h3>{{message}}</h3> <my-cmp>&lt
复制链接

扫一扫