一、什么是编译作用域
官方准则：父组件模板的所有内容都会在父级作用域内编辑，子组件模板所有内容会在子级作用域内编译。
举个例子,在父组件Vue实例内定义一个变量 isShow=true，在子组件内也定义一个变量isShow=false，现在在父组件模板内的子组件中使用使用isShow，那么现在用的是哪一个值？按照官方准则，在父组件模板中用的就是父组件Vue实例中的变量，所以isShow=true
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>04 编译作用域</title>
6 </head>
7 <body>
8 <div id="app">
9 <h2>{{ message }}</h2>
10 <cpn1 v-show="isShow"></cpn1>
11 </div>
12
13 <!--div id='app'中的isShow会去APP对应的VUE实例中查找-->
14
15 <template id="cpn1">
16 <div v-show="isShow">
17 <h2>我是子组件1</h2>
18 </div>
19 </template>
20 <script src="../js/vue.js"></script>
21 <script>
22 const cpn1 = {
23 template: '#cpn1',
24 data(){
25 return {
26 isShow:false
27 }
28 }
29 }
30
31 const app = new Vue({
32 el: '#app',
33 data: {
34 message: 'hello',
35 isShow: true
36 },
37 components: {
38 cpn1
39 }
40 })
41 </script>
42 </body>
43 </html>
界面如下：
子组件在界面显示