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

最新推荐文章于 2023-02-01 14:37:41 发布

Kalinda Sharma

最新推荐文章于 2023-02-01 14:37:41 发布

阅读量207

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/finally_flx/article/details/103872149

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

定义子组件

<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>