关于如何在vue中使用typescript(第三天)

关于如何在vue中使用typescript(第三天)

基于typescript关于父组件和子组件之间常用场景

父组件调用子组件的方法

father.vue

<template>
  <div class="home">
    //ref核心
    <Child ref="child"></Child>
    <button @click="emitChildMethod('父传子')">触发子组件方法</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from './child.vue';

@Component({
  components: {
    Child,
  },
})
export default class Home extends Vue {
  private emitChildMethod(des: string) {
  	//核心
    (this.$refs as any).child.childrenClick(des);
  }
}
</script>

child.vue

<template>
  <div class="about">
    <h1>我是子组件</h1>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
  name:"Child"
})
export default class extends Vue{
  public childrenClick(des:string){
    console.log(des);
    
  }
}
</script>

子组件调用父组件的方法

father.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:08:45
-->
<template>
  <div class="home">
    <Child ref="child" @emitParentMethod2="emitParentMethod2" :emitParentMethod3='emitParentMethod3' ></Child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from "./child.vue";

@Component({
  components: {
    Child,
  },
})
export default class Home extends Vue {
  public test(des: string) {
    console.log(des);
    return "我接受到了";
  }
  public emitParentMethod2(str: string) {
    console.log(str);
  }
   public emitParentMethod3() {
    console.log("第三种方法");
  }
}
</script>

child.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:08:22
-->
<template>
  <div class="about">
    <h1>我是子组件</h1>
    <button @click="emitParentMethod('子传父')">触发父组件方法</button>
    <button @click="emitParentMethod2('子传父2')">触发父组件方法2</button>
    <button @click="test">触发父组件方法3</button>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit, Prop } from "vue-property-decorator";
@Component({
  name: "Child",
})
export default class extends Vue {
  @Prop() public emitParentMethod3!: Function;
  //使用this.$parent
  public emitParentMethod(des: string) {
    //接收调用父类方法的值
    console.log((this.$parent as any).test(des));
  }
  //使用Emit
  @Emit("emitParentMethod2")
  public emitParentMethod2(str: string) {
    return str;
  }
  public test() {
    this.emitParentMethod3();
  }
}
</script>

父组件调用子组件的变量

father.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:13:02
-->
<template>
  <div class="home">
    <button @click="test">我要进行改变</button>
    <Child ref="child"></Child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from "./child.vue";

@Component({
  components: {
    Child,
  },
})
export default class Home extends Vue {
  public test() {
    console.log((this.$refs as any).child.str);
    (this.$refs as any).child.str = "修改后----->12345678890";
  }
}
</script>

child.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:11:56
-->
<template>
  <div class="about">
    <h1>我是子组件</h1>

    <button @click="test">修改后</button>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit, Prop } from "vue-property-decorator";
@Component({
  name: "Child",
})
export default class extends Vue {
  public str = "修改前-------->1234";
  public test() {
    console.log(this.str);
  }
}
</script>

子组件调用父组件的变量

father.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:17:59
-->
<template>
  <div class="home">
    <button @click="test">修改后</button>
    <Child ref="child"></Child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from "./child.vue";

@Component({
  components: {
    Child,
  },
})
export default class Home extends Vue {
  public str = "修改前-------->1234";
  public test() {
    console.log(this.str);
  }
}
</script>

child.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:16:57
-->
<template>
  <div class="about">
    <h1>我是子组件</h1>
<button @click="test">我要进行改变</button>
    
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  name: "Child",
})
export default class extends Vue {
 
  public test() {
    console.log((this.$parent as any).str);
     (this.$parent as any).str = "修改后----->12345678890";
  }
}
</script>

父组件监听传递给子组件的变量变化(不推荐)

father.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:34:17
-->
<template>
  <div class="home">
   
    <Child ref="child" :arr="arr" @change="change"></Child>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from "./child.vue";

@Component({
  components: {
    Child,
  },
})
export default class Home extends Vue {
  public arr: number[] = [1, 2, 3, 4, 5];

  change(newValue: any) {
    this.arr = newValue;
  }
}
</script>

child.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:37:23
-->
<template>
  <div class="about">
    <h1>我是子组件</h1>
    <button @click="test">随机修改值</button>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "Child",
})
export default class extends Vue {
  @Prop() public arr!: number[];
  @Emit("change")
  public test() {
    var arr2: number[] = [];
    for (let index = 0; index < this.arr.length; index++) {
      arr2[index] = Math.ceil(Math.random() * 100);
    }
    this.arr = arr2;
    return this.arr;
  }
}
</script>

子组件监听父组件的某个变量变化

father.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:32:16
-->
<template>
  <div class="home">
    <button @click="test">随机修改值</button>
    <Child ref="child" :arr="arr"></Child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from "./child.vue";

@Component({
  components: {
    Child,
  },
})
export default class Home extends Vue {
  public arr: number[] = [1, 2, 3, 4, 5];
  public test() {
    var arr2: number[] = [];
    for (let index = 0; index < this.arr.length; index++) {
      arr2[index] = Math.ceil(Math.random() * 100);
    }
    this.arr = arr2;
  }
}
</script>

child.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-04-11 21:21:30
 * @LastEditors: solid
 * @LastEditTime: 2022-04-14 23:27:48
-->
<template>
  <div class="about">
    <h1>我是子组件</h1>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({
  name: "Child",
})
export default class extends Vue {
  @Prop() public arr!: number[];
  @Watch("arr", { deep: true, immediate: true })
  change(newValue: any) {
    this.arr = newValue;
  }

}
</script>