定义子组件
<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>
实现效果