vue中父组件如何给子组件传值

定义子组件

<template>
  <div>
    <p>{{transferData}}</p>
  </div>
</template>

<script>
export default {
  name: "innerTemplate",
  props: ["transferData"],
  data() {
    return {};
  },
  created() {
    console.log(this.transferData);
  }
};
</script>

定义父组件

<template>
  <div>
    <el-button @click="doThis">测试传递数据</el-button>

    <!-- 弹窗 -->
    <el-dialog
      title="测试传值"
      :visible.sync="tableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="300px"
    >
        <!-- 子组件 -->
      <innerTemplate :transferData="transferValue" />

    </el-dialog>
  </div>
</template>

<script>
// 引入子组件
import innerTemplate from "./innerviews/innerTemplate";

export default {
  name: "testTransferValue",
  components: {
    innerTemplate
  },
  data() {
    return {
      transferValue: "这是父组件的值",
      tableVisible: false
    };
  },
  methods: {
    doThis() {
      this.tableVisible = true;
    }
  }
};
</script>

实现效果