显示与否根据实例里面的属性来决定
在模板里面，使用很多变量时，当查找变量时先看这个变量在哪个模板里面，不会看现在用的是什么组件，在使用变量时会看在哪个模板里，这意味着使用的变量会去Vue实例里面找，不会去组件里面找
下面代码中主要看 (分清)v-show="Show"用的是哪里的 Show: true/false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 这个模板属于Vue实例的作用域 -->
<cpn v-show="Show"></cpn>
<!-- 用one -->
</div>
<template id="cpn">
<!-- 此模板属于组件 -->
<div>
<h2>此为子组件</h2>
<p>center</p>
<!-- 在这里用到的任何变量，都会去组件里查找这个变量，再来使用 -->
<button v-show="Show">按钮</button>
<!-- 用two -->
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
// one
Show: true
},
// 组件
components: {
cpn: {
template: '#cpn',
data() {
return {
// two
Show: false
}
}
}
}
})
</script>
</body>
</html>
