1-11 父组件传值给子组件

1-1 子组件设置动态属性,接收父组件传递过来的参数

<Hello :data="child"></Hello>

1-2 在子组件的@Prop中注册

! 表示这个数据是一定要传递的

<script lang="ts">
import { Component, Vue,Prop } from "vue-property-decorator";
@Component
export default class Hello extends Vue {
    @Prop() data!:string;
    /* !这个数据是一定要传递的 */
}
</script>

1-3 使用

hello.vue

<template>
  <div>
      Hello Component
      {{data}}
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Hello extends Vue {
  @Prop() data!:string;
  //!表示这个数据时一定要传递的
}
</script>
<style scoped>
</style>

App.vue

<template>
  <div id="app">
    {{ list }}
    <!-- {{msg}} -->
    <Hello :data="child"></Hello>
  </div>
</template>
<script lang="ts">
import { Component, Provide, Vue } from "vue-property-decorator";
import Hello from "./components/Hello.vue";
@Component({
  components: {
    Hello,
  },
})
export default class App extends Vue {
  //方法装饰器
  @Provide() list: string = "list";
  @Provide() child: string = "child";
  // msg:string = "hello world";
  mounted(): void {
    console.log("mounted");
  }
}
</script>
<style>
</style>