快速瞭解VUE中的編譯作用域

霜色微涼_R發表於2020-11-28
Vue編譯

父元件模板的所有東西都會在父級作用域內編譯;
子元件模板的所有東西都會在子級作用域內編譯。
直接上程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div class="app">
			<!-- isshow用的是vue例項的  true -->
			<cpn v-show="isshow"></cpn>
		</div>

		<template id="cpn">
			<div class="">
				<h1>我是h1</h1>
				<!-- isshow用的是子元件  false -->
				<button v-show="isshow">button</button>
			</div>
		</template>
		<script type="text/javascript">
			const app = new Vue({
				el: ".app",
				data: {
					message: "你好",
					isshow: true
				},
				/* 定義一個子元件 */
				components: {
					cpn: {
						template: "#cpn",
						data() {
							return {
								isshow: false
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

相關文章