vue2+ts 之组件通信

vue2+ts 之组件通信

prop的定义

父组件

<template>
  <div id="app">
    <MenuBar :msg="msg" txt="txt" @changeMsg="changeMsg"></MenuBar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import MenuBar from '@/components/MenuBar.vue'

@Component({
  components: {
    MenuBar
  }
})
export default class App extends Vue {
  private msg: string = 'msg信息'
}
</script>

子组件

<!-- -->
<template>
  <div>
    MenuBar
    <div>父组件msg - {{ msg }}</div>
    <div>父组件txt - {{ txt }}</div>
    <div>父组件test - {{ test }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
  components: {}
})
export default class MenuBar extends Vue {
  // readonly - 只读、  msg! - msg字段非空、  { default: 'default value' }为默认值
  @Prop(String) readonly msg!: string | undefined
  @Prop([String, Number]) readonly txt: number | string | undefined
  @Prop({ default: 'default value' }) readonly test: string
}
</script>
<style lang="scss" scoped></style>

• 效果
  

Emit 子组件 触发事件

父组件

<template>
  <div id="app">
    <MenuBar :msg="msg" txt="txt" @changeMsg="changeMsg"></MenuBar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import MenuBar from '@/components/MenuBar.vue'

@Component({
  components: {
    MenuBar
  }
})
export default class App extends Vue {
  private msg: string = 'msg信息'

  private changeMsg(val): void {
    console.log('changeMsg', val)
    this.msg = val
  }
}
</script>

子组件

<!-- -->
<template>
  <div>
    MenuBar
    <div>父组件msg - {{ msg }}</div>
    <button @click="changeMsg">修改msg</button>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
@Component({
  components: {}
})
export default class MenuBar extends Vue {
  // readonly - 只读、  msg! - msg字段非空、  { default: 'default value' }为默认值
  @Prop(String) readonly msg!: string | undefined
  @Prop([String, Number]) readonly txt: number | string | undefined
  @Prop({ default: 'default value' }) readonly test: string

 // Emit子组件触发
  @Emit('changeMsg') // changeMsg 实际触发父组件的事件
  private changeMsg(val: number) {
    return '我是子组件修改后的msg'
  }
}
</script>
<style lang="scss" scoped></style>

• 效果
  
  

Model

父组件

<template>
  <div id="app">
    父-msg - {{ msg }}
    <MenuBar v-model="msg"></MenuBar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import MenuBar from '@/components/MenuBar.vue'

@Component({
  components: {
    MenuBar
  }
})
export default class App extends Vue {
  private msg: string = 'msg信息'
}
</script>

子组件

<!-- -->
<template>
  <div>
    MenuBar

    <input type="text" :value="inputValue" @input="cahngeHandle($event)" />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Model } from 'vue-property-decorator'
@Component({
  components: {}
})
export default class MenuBar extends Vue {
  @Model('change', { type: String }) readonly inputValue!: string

   // Emit子组件触发
  @Emit('change') // 实际触发的 父组件的事件
  private cahngeHandle(event) {
    // console.log("event",event.target.value); // msg信息1
    return event.target.value
    
  }
}
</script>
<style lang="scss" scoped></style>

• 效果