vue之父子组件传值

重点

• 父组件在使用子组件标签的时候，通过某个属性赋值，然后子组件通过props数组或对象接收
• props对象可以通过prop：String限定传值的类型
  父组件

<template>
  <div id="App">
    <!-- 通过data中的msg动态绑定msg -->
    <Son :one-msg="msg" />
    <!-- 点击切换msg显示的值 -->
    <button @click="msg = '儿子,爸爸来看你了'">点我切换信息</button>
  </div>
</template>
<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  data: () => ({
    msg: 看看爸爸给你啥了呀,
  }),
  components: {
    Son,
  },
};
</script>

子组件

<template>
  <div>
    <button>{{ fullText }}</button>
  </div>
</template>
<script>
export default {
  props: {
    // props更改为对象可以指定oneMsg的值为string类型
    oneMsg: String,
    required: true,
    default: "默认值按钮",
  },
  computed: {
    fullText() {
      return this.oneMsg + "fullText";
    },
  },
};
</script>