如何使用模板语法访问 vuejs 中的父数据值

Question

在我的 VueJS 应用程序中，我使用 bootstrap-vue 并希望在可折叠元素 b-collapse 内使用 iframe。由于 iframe 内容和调整大小的一些问题（问题与这里无关），我发现如果我启用/禁用 b-embed 并进行条件渲染，它就可以工作。

父组件b-collapse 有一个名为show 的数据元素，如果单击切换，它会更改其状态。在我的HelloWorld 组件中，我希望b-collapse 可以将它的show 值传递给if 的b-embed 检查。

我使用this.$parent.$data.show 的方法不起作用，我不确定是否有更好的方法。

<template>
<div>
  <b-btn v-b-toggle.logs>
    <span class="when-opened">Close</span>
    <span class="when-closed">Open</span>
    Trace
  </b-btn>
  <b-collapse id="logs">
    <b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
    <div>Data: {{this.$parent.$data.show}}</div>
  </b-collapse>
</div>
</template>


<script lang="ts">
import Vue from "vue";
import { Prop, Component, Inject } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  src = "http://localhost:7681/";
}
</script>

Answer 1

像这样：

parent.vue

<template>
    <Child :show="myShow"></Child>
</template>
<script>
    import Child from './child'
    export default {
        data () {
              return {
                   myShow: 'StackOverflow'
              }
        },
        components: {Child}
    }
</script>

child.vue

<div>
  <b-btn v-b-toggle.logs>
    <span class="when-opened">Close</span>
    <span class="when-closed">Open</span>
    Trace
  </b-btn>
  <b-collapse id="logs">
    <b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
    <div>Data: {{this.$parent.$data.show}}</div>
  </b-collapse>
</div>
<script>
     export default {
          props: {
               show: {
                   type: Number,
                   require: true 
               }
          }
     }
</script>     

或使用vuex 来执行此操作。