【Vue元件通訊】props、$ref、$emit,元件傳值
阿新 • • 發佈:2020-07-24
1、什麼是元件通訊
元件間如何通訊,也就成為了vue中重點知識,元件通訊,涉及到元件之間資料的傳遞、類似NET POST/GET引數傳遞。
Vue基本的三種傳遞方式** (props、\(ref、\)emit)** 元件是 vue.js 最強大的功能之一,而元件例項的作用域是相互獨立的,這就意味著不同元件之間的資料無法相互引用。那麼元件間如何通訊,也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點,來講解如何實現父子元件間通訊。
2、父子通訊 (props、\(ref、\)emit) 區別
prop 著重於資料的傳遞,它並不能呼叫子元件裡的屬性data和方法methods。適合的場景是從父親給孩子,給了之後就是給了,最適合使用prop,。
$ref 著重於索引,主要用來呼叫子元件裡的屬性和方法,其實並不擅長資料傳遞,但是也是可以傳遞引數的。
3、Props 父到子
3.1 參考程式碼
3.1.1 父頁面
- 父頁面呼叫子元件 參考(1)
- 引用子元件 參考(2)
- 註冊區域性元件 參考(3)
<template> <div> <h1>我是父元件!</h1> <one-chart id="myChart" :height="500px" :width="500px" :chart-option="echartOption" /> <!-- (1)這是子元件---> </div> </template> <script> // (2)引用一下子元件 位置 import OneChart from '@/components/Charts/OneChart' export default { components: { OneChart }, // (3)註冊一下元件 } </script>
3.1.2 子頁面
- props 寫入需要的屬性。props 支出型別【String、Number、Boolean、Array、Object、Date、Function、Symbol】,參考官網文件(元件props 介紹)
<template> <h3>我是子元件!</h3> </template> <script> import echarts from 'echarts' import resize from './mixins/resize' export default { name: 'OneChart', mixins: [resize], props: { className: { type: String, default: 'chart' }, id: { type: String, default: 'chart' }, width: { type: String, default: '200px' }, height: { type: String, default: '200px' }, chartOption: { type: Object, default: () => [] } }, data() { return { chart: null } }, watch: { chartOption: function() { console.log('我是元件chart watch') console.log(this.chartOption) if (this.chartOption !== undefined && this.chartOption !== null) { this.initChart() } } }, mounted() { console.log('我是元件chart mounted') console.log(this.chartOption) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { console.log(this) } } } </script>
3.2 擴充套件知識
- 單向資料流(從父到子,先父後子)
- 傳遞靜態或動態 Prop(v-bind)
- 駝峰命名法等價短橫線分隔命名
- 子元件繼承父元件的屬性
- 子元件繼承父元件的屬性,可以設定替換/合併已有的 Attribute(覆蓋重寫)、禁用 Attribute 繼承
詳細介紹文件https://cn.vuejs.org/v2/guide/components-props.html
4、ref 父到子
4.1 參考程式碼
4.1.1 父頁面
<base-input ref="usernameInput"></base-input>
可以在父頁面任意的使用,可以呼叫子頁面的 methods
this.$refs.usernameInput.focus()
this.$refs.usernameInput.demo('我是引數,任意的那種')
4.1.2 子頁面
methods: {
// 用來從父級元件聚焦輸入框
focus: function () {
this.$refs.input.focus()
},
demo(data){
console.log(data)
}
}
4.2 擴充套件知識
- 儘管存在 prop 和事件,有的時候你仍可能需要在 JavaScript 裡直接訪問一個子元件。為了達到這個目的,你可以通過 ref 這個 attribute 為子元件賦予一個 ID 引用。例如:
- 當 ref 和 v-for 一起使用的時候,你得到的 ref 將會是一個包含了對應資料來源的這些子元件的陣列。
- $refs 只會在元件渲染完成之後生效,並且它們不是響應式的。這僅作為一個用於直接操作子元件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs。
- ref 對子元件的方法屬性的索引,通過$ref可能獲取到在子元件裡定義的屬性和方法。
- 如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通過\(ref可能獲取到該DOM 的屬性集合,訪問DOM元素,作用與JQ的 【\)('#ID')】類似。
5、emit 子到父
5.1 參考程式碼
5.1.1 父頁面
<base-input ref="usernameInput" @inputShowMsg="showMsg" ></base-input>
methods: {
// 用來從父級元件聚焦輸入框
focus: function () {
this.$refs.input.focus()
},
showMsg(data){
console.log('showMsg')
console.log(data)
//data 輸出: 我是元件的引數,接收一下啊
}
}
### 4.1.2 子頁面
methods: {
demo(data){
console.log('demo')
console.log(data)
this.$emit('getMessage', '我是元件的引數,接收一下啊')
}
}
### 5.2 擴充套件知識
- emit 是程式化的事件偵聽器,它可以被 v-on 偵聽
- 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入**內部元件**——在建立更高層次的元件時非常有用。