1、目录如下:
2、源码如下
child.vue
<template> <div> <div>{{ propVal }}</div> <el-button @click="emitVal('我是儿子')">我是子组件</el-button> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch, Emit, Model, Ref } from 'vue-property-decorator' @Component({ name: 'Child' }) export default class Child extends Vue { @Prop() private propVal: any // Emit子组件触发 @Emit('emitValFun') private emitVal(val: string) { return val } // Model @Model('click') readonly value!: string } </script> <style lang="scss" scoped></style>
index.vue
<template> <div> <el-button>我是父组件</el-button> <child :propVal="propVal" @emitValFun="selfFun" value="我是value"></child> <div id="login_container"></div> </div> </template> <script lang="ts"> import { Vue, Component, Watch, Emit, Model, Ref } from 'vue-property-decorator' import child from './child.vue' import Mixin from './mixins' interface stringVAl { form: string } @Component({ name: 'my', components: { child }, mixins: [Mixin] }) export default class Test extends Vue { private text: stringVAl = { form: '字符串' } private propVal: any = '父组件给子组件传值' // 监听 @Watch('text', { deep: true }) changeText(val: any) { console.log('watch监听') } // 计算属性监听 get textVAl() { return this.text } // Emit父组件接收 selfFun(q: string) { console.log(q, '父组件接收子组件值') } setWxerwma() { // const obj = new WxLogin({ // self_redirect: true, // id: 'login_container', // 需要显示的容器id // appid: 'wxef5765dd395d8504', // 公众号appid wx******* // scope: 'snsapi_login', // 网页默认即可 // redirect_uri: encodeURIComponent('https://passport.zcool.com.cn/thirdlogin/wechat_callback.do?appId=1006'), // 授权成功后回调的 // state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验 // style: 'black', // 提供"black"、"white"可选。二维码的样式 // href: 'https://static.zcool.cn/passport4.0/css/wxCode.css?v=0.1' // 外部css文件url,需要https // }) } mounted() { this.setWxerwma() } } </script> <style lang="scss" scoped></style>
minixs.vue
/** * 这个组件完全依赖于vue-class-component.它具备以下几个属性: @Component (完全继承于vue-class-component) @Emit @Inject @Provice @Prop @Watch @Model Mixins (在vue-class-component中定义); 作者:Homary 链接:https://www.jianshu.com/p/d8ed3aa76e9b */ import { Vue, Component, Ref, Watch } from 'vue-property-decorator' @Component export default class Mixin extends Vue { testFun() { console.log('11111111111111111111') } mountedFun() { console.log('2222222222222222222') } created() { this.testFun() } mounted() { this.mountedFun() } }