一、理解变量作用域代码：
<my-cpn v-show="isShow"></my-cpn>
什么是编译的作用域
<body>
<div id="app">
{{message}}
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<p>我是内容哈哈哈</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'你好啊！',
isShow:true
},
components:{
cpn:{
template:"#cpn",
data(){
return {
isShow:false
}
}
}
}
})
</script>
</body>
例如上面代码：组件内有isShow这个变量，子组件也有isShow这个变量，组件使用变量会从自身组件内找
官方准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
二、作用域插槽的使用（父组件取插槽内data中定义的数据）
个人总结：父组件替换插槽的标签，但是内容由子组件来提供
案例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 默认的组件使用 -->
<h2>默认展示样式</h2>
<cpn></cpn>
<!-- 父组件拿到子组件的数据后在父组件中遍历使用 -->
<h2>自定义插槽展示</h2>
<cpn>
<!-- 3.在自定义插槽的时候，需要先加一个标签2.5以下只能是template,2.5以上则随意 -->
<!-- 4. slot-scope="slot"将子组件赋值给一个变量(如slot)-->
<template slot-scope="slot">
<!-- 5.slot.data则是子组件的pLanguages数据 -->
<span v-for="(item,index) in slot.data" key="index">{{item}}---</span>
</template>
</cpn>
<h2>使用join分割完美展示</h2>
<cpn>
<template slot-scope="slot">
<span>{{slot.data.join(' - ')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<!-- 1.定义slot -->
<!-- 2.随便起一个变量(如data)等于子组件的数据值 -->
<slot :data="pLanguages">
<ul>
<li v-for="(item,index) in pLanguages" key="index">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊！'
},
components: {
cpn: {
template: '#cpn',
data() {
return {
pLanguages: ['javascript', 'C++', 'java', 'C#', 'Python', 'Go', 'Swift']
}
}
}
}
})
</script>
</body>
</html>
效果展示：
