重新创建了项目
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']
}
}
1211 下午
- 安装 vuex-module-decorators 运行依赖包
- 建立模块 modules 文件夹,里面有 company.ts
- company.ts 先定义一个接口文件 ICompany
- 可以借助
vuex-module-decorators
去创建模块 VuexModule
创建模块的类Module
是vuex
模块的装饰器
company.ts
import { VuexModule, Module } from "vuex-module-decorators";
interface ICompany {
name: string;
created_at: string;
info: string;
}
@Module
export default class Company extends VuexModule {
companyInfo: ICompany = {
name: "第嘉",
created_at: "2020-12-11",
info: "前端实习营地",
};
}
index.js
import company from "./modules/company";
export default new Vuex.Store({
modules: {
company,
},
});
Company.vue 内
created() {
console.log(this.$store.state.company.companyInfo)
}