# 编译作用域
## 通过案例来进行了解
```
<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] 组件的插槽可以放入组件
> 插槽也可以化简数据的传递关系（编译作用域）
