props传值(父组件向子组件传值)

App.vue

<template>
  <div id="app">
    <my-parent></my-parent>
  </div>
</template>

<script>
import MyParent from "./views/Parent";
export default {
  components: {
    MyParent
  }
};
</script>
<style>
</style>

Parent.vue

<template>
  <div>
    <h2>Parent</h2>
    <my-child v-bind:msg="`from Parent`"></my-child>
  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  components: {
    MyChild
  }
};
</script>

<style>
</style>

Child.vue

<template>
  <div>
    <h2>Child</h2>
    {{msg}}
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ""
    }
  }
};
</script>

<style>
</style>

猜你喜欢

转载自www.cnblogs.com/xl4ng/p/12591667.html