Как получить доступ к значению данных родителей в vuejs с помощью синтаксиса шаблона - PullRequest
Новая
       14

Как получить доступ к значению данных родителей в vuejs с помощью синтаксиса шаблона

0 голосов
/ 05 января 2019

В своем приложении VueJS я использую bootstrap-vue и хочу использовать iframe внутри складных элементов b-collapse. Из-за некоторых проблем с содержанием и изменением размера 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>

1 Ответ

0 голосов
/ 05 января 2019

Как это:

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 для этого.

...