组件之间的访问方式
-
$children
父组件通过 this.$children[index] 可以访以对象的形式问子组件 一般来说index取值会有不稳定性 -
$.refs（常用）
父组件通过 this.$refs.name name为ref的值 通过给子组件添加ref属性来获取自定组件对象 去操作 -
$.parent
子组件通过 this.$parent 访问父组件 拿到父组件对象 -
$.root
子组件通过 this.$root方法来访问根组件 即Vue实例
插槽
-
slot 标签
表示这个是一个插槽 基本使用：<slot></solt> 如果有多个值，同时放入到组件进行替换时 一起作为替换元素
<div id="app">
<cpn>
<!-- 插槽赋值-->
<button> 按钮</button>
</cpn>
<!-- 默认会将所有内容替换到插槽-->
<cpn>
<div>我是div</div>
<button>新按钮</button>
</cpn>
<!-- 执行插槽替换-->
<cpn>
<button slot="s1">这个s1插槽的按钮</button>
</cpn>
</div>
<template id="my-cpn">
<div>
<!-- 设置插槽的默认值-->
<slot>我是一个插槽</slot>
<!-- 如果要使用多个插槽就需要给每个插槽指定name属性-->
<slot name="s1">我是一个插槽</slot>
<slot name="s2">我是一个插槽</slot>
</div>
</template>
<script>
const vm = new Vue({
el: "#app",
data: {},
components: {
cpn: {
template: '#my-cpn',
data() {
return {name: '子组件'}
}
}
}
});
</script>- 组件的作用域
在当前模板内不管引用任何组件 只要使用到变量 一定是当前模板所绑定的组件
每一个模板之间的作用域是相互隔离的，
如果想引用子组件的数据就需要进行 template引用 -
作用域插槽
父组件替换插槽的标签，但是内容由子组件来提供
template引用：- 在子组件模板中使用 来绑定子组件内的数据
- 然后在引用处 使用 进行引用子组件插槽对象
- 通过 slot.data 获取子组件的数据对象
模块化
-
为什么要用模块化？
由于全局变量不同文件之间的变量相互影响 导致变量覆盖 - ES6的模块化 导入和导出
// file : a.js
var name = 'tim'
var age = 23
function sum(num1, num2){
return num1 + num2;
}
// 导出 方式1
export {
name,
age,
sum
}
// 导出 方式2
export var num1 = 100
export var page = 10
// 导出方法
export function sub (n1, n2){
return n1 - n2
}
// 导出类
export class dog {
run(){
console.log('奔跑');
}
}
export default sum()
// export default 导出的内容只有一个 也只能有一个
// file : b.js
// 导入
import {name, age, num1} from './a.js'
console.log(name);
console.log(age);
console.log(num1);
console.log(sub(num1, age));
// 导入 export default 内容
import sm from './a.js'
sm(1, 2)
// 如果要使用export 和 import
// 就必须要在引入js的时候设置 type='module' 属性
// 全部导入
import * from './a.js'补充
-
v-slot
在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性
// 根组件
<template>
<div>
<mo>
<template v-slot:header="slotProps">
<h1>{{slotProps.header + ' ' + msg}}</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</mo>
</div>
</template>
<script>
import mo from './module.vue'
export default {
components: {
mo
},
data() {
return {
msg: '这是根组件的消息'
}
}
}
</script>
// 子组件
<template>
<div>
--header start--
<header>
<slot name="header" :header="header"></slot>
</header>
--header over--
<div></div>
--default start--
<slot></slot>
--default over--
<div></div>
--footer start--
<footer>
<slot name="footer"></slot>
</footer>
--dooter over--
</div>
</template>
<script>
export default {
data() {
return {
header: '来自子组件的头部消息'
}
}
}
</script>
<style scoped>
</style>
- 组件中可以使用template标签，加v-slot指令制定具名插槽，当没有指定插槽name时，默认出口会带有隐含的名字“default”。
- 根组件可以利用v-slot:header="slotProps"接受组件中的消息，组件中只需要在就可以了
- 如果被提供的内容只有一个默认插槽时，组件的标签可以直接被当做插槽的模板来使用
- 动态参数也可是使用到插槽当中
- v-slot的缩写是#，但是如果使用#的话，必须始终使用具插槽来代替
