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

Posted 2023-02-23

【中文标题】如何使用模板语法访问 vuejs 中的父数据值

【英文标题】：How to access parents data value in vuejs with the template syntax

【发布时间】：2019-05-31 12:24:45

【问题描述】：

在我的 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>

【问题讨论】：

将show 作为a property 传递给子组件。

【参考方案1】：

像这样：

parent.vue

<template>
    <Child :show="myShow"></Child>
</template>
<script>
    import Child from './child'
    export default 
        data () 
              return 
                   myShow: '***'
              
        ,
        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 来执行此操作。

【讨论】：

实际上我想要的是在我的 HelloWorld 组件中 b-collapse 在b-embed v-if 中设置他的show 值。我无法修改 b-collapse/b-embed，因为它们是第 3 方 bootstrap-vue 的一部分。