Question

我有两个组成部分。单击“提交”时，其中之一将值高度赋予另一值。单击“提交”后，第一个组件应隐藏，而第二个组件应可见。到目前为止，它仍然有效，但是似乎第二个组件中的高度并不安全。

非常感谢！

没有v-如果它可以完美地工作！

//ComponentOne
<template>
  <body>
    <div id="aside">
      <footer>
        <b-button  v-on:click="submit">Submit</b-button>
      </footer>
    </div>
  </body>

</template>

<script>
  import { EventBus } from '@/main.js'
  export default {
    data() {
      return {
        submitp1: false,

        height: 5,
        width: 6,

      }
    },
    methods: {
      submit: function () {
        this.submitp1 = !(this.submitp1)
        EventBus.$emit('submitp1emit', this.submitp1)
 EventBus.$emit('1to2', this.height)
      }
    },
  }

</script>

//ComponentTwo
<template>
  <div >
    number <br />
   height:  {{height}}

</div>
</template>
<script>
  import { EventBus } from '@/main.js'
  export default {
    data: function () {
      return {
        height: '',
      }
    },

    mounted() {
      const self = this
      EventBus.$on('1to2', function{ height) {
        self.height = height
      })
  }
  }

</script>

//main.js
<template>
  <div id="app">
    <ComponentOne v-if="submitp1 == false" />
    <ComponentTwo v-if="submitp1 == true" />

      </div>
</template>
<script>
  import { EventBus } from '@/main.js'
  import ComponentOne from '@/components/p1Comp/ComponentOne.vue'
  import ComponentTwo from '@/components/p1Comp/ComponentTwo.vue'



  export default {
    components: {
      ComponentOne,
ComponentTwo
}
    data: function () {
      return {
        submitp1: false
      }
    },
    mounted() {
      const self = this
      EventBus.$on('submitp1emit', function (submitp1emit) {
        self.submitp1 = submitp1emit
      })
    }
  }
</script>

Answer 1

从Vue文档中：

v-if是“真实的”条件渲染，因为它可以确保该事件条件块中的侦听器和子组件是在切换过程中正确销毁并重新创建。

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

切换后的组件根本不存在。如前所述，您可以改用“ v-show”。

Vue：显示其他组件时，变量不安全

1 个答案: