# 編譯作用域
## 通過案例來進行了解
```
<div id="app">
<my-com v-show="isShow"></my-com>
</div>
<template id="myCom">
<h2>可不可以顯示出來?</h2>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-com',{
template:'#myCom',
data(){
return {
isShow:false
}
}
})
var vm = new Vue({
el:'#app',
data:{
isShow:true
}
})
</script>
```
組件會不會展示出來呢？`<my-com v-show="isShow"></my-com>` 給子組件中的數據定義`isShow:false`。如果它采用的是子組件中的數據，則會隱藏。如果它采用的是實例中的數據，`isShow:true`，則會顯示。
:-: 
## 為什么呢
>[success] 官方準則：
> 父組件模板的所有東西都會在父級作用域內編譯（用父組件的數據）；子組件模板的所有東西都會在子級作用域內編譯（使用子組件的數據）
而我們在使用的時候`<my-com v-show="isShow"></my-com>`，整個組件的使用過程是相當于在父組件中出現的。
那么他的作用域就是父組件，使用的屬性也是屬于父組件的屬性。
因此，isShow使用的是Vue實例中的屬性，而不是子組件的屬性。
## 用途（掌握）
可以將我們的嵌套組件之間的`props`傳遞化簡。如: A->B->C。
> 其中C組件用到了A組件的數據，按照我們之前傳遞數據的方式可以通過A組件向B組件通過props傳遞數據，再C組件繼續通過Props傳遞數據。B組件只是起了一個橋一樣，B組件并不需要這個數據。
~~~
<div id="app">
<my-parent :msg="msg"></my-parent>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-child', {
props:['msg'],
template: `<p>子組件<br>{{msg}}</p>`
});
Vue.component('my-parent', {
props:['msg'],
template: `<div>父組件<my-child :msg="msg"></my-child></div>`
});
var vm = new Vue({
el: '#app',
data: {
msg: '實例數據'
}
})
</script>
~~~
我們可以通過`插槽的編譯作用域`來化簡一下。
~~~
<div id="app">
<my-parent>
<my-child>{{msg}}</my-child>
</my-parent>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-child', {
template: `<p>子組件<br><slot>{{msg}}</slot></p>`
});
Vue.component('my-parent', {
template: `<div>父組件 <slot></slot></div>`
});
var vm = new Vue({
el: '#app',
data: {
msg: '實例數據'
}
})
</script>
~~~
## 總結：
>[success] 組件的插槽可以放入組件
> 插槽也可以化簡數據的傳遞關系（編譯作用域）
