vue-ts-demo1
重新建立了專案
vue-property-decorator 掘金
元件內使用 自定義事件
父元件
<ButtonDemo @add="add" @reduce="reduce" text="預設按鈕"></ButtonDemo>
count = 0
add() {
this.count++
// console.log(this)
}
reduce() {
this.count--
}
子元件
- @Emit 裝飾器 可以接收父元件傳遞的方法,而且這個方法內可以寫一些語句,這個方法會和父元件傳遞過來的 事件合併。
- 以前寫的時候只能在 handle 方法裡面操作自己的事,上面的標籤中不能寫 add() ,但是現在用 @Emit 可以了。很高階。
- @Emit
<button @click="$emit('reduce')">-</button>
<button @click="handle">-</button>
<button @click="reduce">-</button>
<button @click="$emit('add')">+</button>
<button @click="add">+</button>s
// 自定義事件(原始的方法)
handle() {
this.$emit('reduce')
}
@Emit()
add() {
console.log('子元件內需要做的事情')
}
reduce() {
console.log('子元件內需要做的事情')
}
元件內使用 生命週期 計算屬性 computed
@Component
裝飾器是裝飾 ButtonDemo class 類的- 但是注意一點,必須是
@Component
裝飾器裝飾了,類內的裝飾器才能被使用。 @Component
裝飾器 是一個方法- 作用 1. 可以匯入子元件
- 作用 2. 宣告生命週期
- 作用 3. 設定計算屬性
@Component({
// 註冊子元件
components: {
ButtonDemo
},
created() {
// console.log('vuex-class 拿的資料:',this.StateStr)
console.log('vuex-class 拿的資料:', this.str)
},
// 計算屬性
computed: {
Count() {
return this.count + this.count
}
}
})
元件內使用 @Watch
- 測試 @Watch
- @Watch 偵聽器的裝飾器
@Watch('$route.query.tab', { immediate: true })
handleTab(newTab: string, oldTab: string) {
console.log('ButtonDemo', newTab, oldTab)
}
在元件內獲取 $route
還要看視訊聽老師是怎麼解釋的
- 直接在事件內訪問
$route
編輯器會報錯 - 直接在 class 內定義一個公共屬性
$route
$route
並不存在在我元件上
text() {
console.log(this.$route)
}
在元件內獲取 vuex
- 在元件是可以直接獲取 vuex 資料的
@Component({
// 元件的生命週期鉤子函式 寫在 @Component 裝飾器內
created() {
console.log(this.$store.state.str)
}
})
- 元件想要和 vuex 做互動,提倡使用 vuex-class 工具做互動,不直接在 vuex 去獲取一些輔助方法(mapState…)
- 然後去裝包 執行依賴
vuex-class
或者npm install --save vuex-class
- 匯入
import { State } from 'vuex-class'
然後就去使用這個工具包裡面的方法做展示。如果不知道怎麼用就去npm
官方文件搜尋檢視工具使用。
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
@Component
export class MyComp extends Vue {
@State("foo") stateFoo;
@State((state) => state.bar) stateBar;
@Getter("foo") getterFoo;
@Action("foo") actionFoo;
@Mutation("foo") mutationFoo;
@someModule.Getter("foo") moduleGetterFoo;
// 如果省略引數,請使用屬性名稱
// 對於每個狀態/獲取器/操作/變異型別
@State foo;
@Getter bar;
@Action baz;
@Mutation qux;
created() {
this.stateFoo; // -> store.state.foo
this.stateBar; // -> store.state.bar
this.getterFoo; // -> store.getters.foo
this.actionFoo({ value: true }); // -> store.dispatch('foo', { value: true })
this.mutationFoo({ value: true }); // -> store.commit('foo', { value: true })
this.moduleGetterFoo; // -> store.getters['path/to/module/foo']
}
}