組件之間的訪問方式
-
$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的縮寫是#,但是如果使用#的話,必須始終使用具插槽來代替