1. 编译作用域
- 官方准则:父组件模板的所有东西都会在父级作用域内编译,子组件模板的所有东西都会在子级作用域内编译。
- 概念性的东西难以理解我们用一个小案例来说明
- isShow属性包含在组件中,也包含在Vue实例中
- 而我们在使用的时候,整个组件的使用过程是相当于在父组件中出现的。
- 那么他的作用域就是父组件,使用的属性也是属于父组件的属性。
- 因此,isShow使用的是Vue实例中的属性,而不是子组件的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<h2>我能不能显示出来</h2>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
isShow:true
},
components:{
'cpn':{
template:'#cpn',
data(){
return{
isShow:false
}
}
}
}
})
</script>
</body>
</html>
2. slot 插槽
- slot翻译为插槽:
在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等 - 组件的插槽:
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么 - 例子:移动网站中的导航栏。
移动开发中,几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件,比如nav-bar组件。
一旦有了这个组件,我们就可以在多个页面中复用了。
slot基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn>
<span>1.利用slot插槽替换元素</span>
</cpn>
<cpn>
<h3>2.替换多个元素</h3>
<p>替换的元素p内容</p>
</cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是组件的内容 作者:小贱</p>
<slot><button>按钮</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
message: "hello vue"
},
components:{
cpn:{
template:'#cpn'
}
}
})
</script>
</body>
</html>
3. 具名插槽
- 当子组件的功能复杂时,子组件的插槽可能并非是一个。
- 比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。
- 那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
- 这个时候,我们就需要给插槽起一个名字
- 如何使用具名插槽呢?
- 非常简单,只要给slot元素一个name属性即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn><span slot="center">标题</span></cpn>
<cpn><span slot="left">返回</span></cpn>
</div>
<template id="cpn">
<div>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
<slot name="left"><span>左边</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
message: "hello vue"
},
components:{
cpn:{
template: '#cpn'
}
}
})
</script>
</body>
</html>