选项html元素周围的"main“div不允许将它们插入父组件中。

Question

我有两个下降，如下：

 <div class="row">
      <div class="col-4 offset-3 text-center">
          <select v-model="animation1">
            <option selected hidden>In Animation</option>
            <app-dropdown-options></app-dropdown-options>
          </select>
      </div>
    </div>

    <br>

    <div class="row">
      <div class="col-4 offset-3 text-center">
        <select v-model="animation2">
          <option selected hidden>Out Animation</option>
          <app-dropdown-options></app-dropdown-options>
        </select>
      </div>
    </div>

因为我不想重复我自己的话，所以我创建了一个组件，它具有以下这些选项：

<template>

        <div>
          <option value="animated bounce">bounce</option>
          <option value="animated wobble">wobble</option>
          <option value="animated bounceInLeft">bounceInLeft</option>
          <option value="animated bounceOutDown">bounceOutDown</option>
          <option value="animated fadeIn">fadeIn</option>
          <option value="animated fadeInLeftBig">fadeInLeftBig</option>
          <option value="animated fadeInUpBig">fadeInUpBig</option>
          <option value="animated fadeOutLeft">fadeOutLeft</option>
        </div>
    </template>

在此之后，我在selects.The上使用子组件，唯一的问题是在子组件上，其中主div，围绕选项引起问题。我尽力寻找解决办法，但我做不到，所以我决定公开我的问题

Answer 1

另一种解决方案是在子组件内部进行整个选择，并将“动画in”和“动画输出”传递给它，其中这些分别是两个选择的文本，如果props.Even是相同的组件，则Vue将该组件视为每个选择的唯一。

父组件：

<div class="row">
  <div class="col-4 offset-3 text-center">
      <app-dropdown-options passedInOrOut="In Animation" @optionWasChanged="firstAnimation($event)"></app-dropdown-options>
  </div>
</div>

<br>

<div class="row">
  <div class="col-4 offset-3 text-center">
      <app-dropdown-options passedInOrOut="Out Animation" @optionWasChanged="secondAnimation($event)"></app-dropdown-options>
  </div>
</div>

儿童部分：

<template>
  <select v-model="optionSelected">
    <option selected hidden>{{anim}}</option>
    <option value="animated bounce">bounce</option>
    <option value="animated wobble">wobble</option>
    <option value="animated bounceInLeft">bounceInLeft</option>
    <option value="animated bounceOutDown">bounceOutDown</option>
    <option value="animated fadeIn">fadeIn</option>
    <option value="animated fadeInLeftBig">fadeInLeftBig</option>
    <option value="animated fadeInUpBig">fadeInUpBig</option>
    <option value="animated fadeOutLeft">fadeOutLeft</option>
  </select>
</template> 

对于那些希望查看父组件和子组件脚本的人：

父组件的Js：

<script>
import Options from './dropdownOptions.vue';
  export default{
    components:{
      'app-dropdown-options':Options
    },
    data(){
      return{
        show:true,
        animation1:'empty',
        animation2:'empty',
        animate:'animated bounce',
        inOrOut:'In'
      }
    },
    methods:{
      firstAnimation(animation){
        this.animation1 = animation;
      },
      secondAnimation(animation){
        this.animation2 = animation;
      }
    }
  }
</script>

关于儿童部分的联合材料：

<script>
    export default{
    props:['passedInOrOut'],
    data(){
      return{
        anim:this.passedInOrOut,
        option:''
      }
    },
    computed:{
      optionSelected:{
        get(){
          return this.option = this.anim;
        },
        set(option){
          this.option = option;
          this.$emit('optionWasChanged',this.option);
        }
      }
    }
    }
</script>

Answer 2

这里真正重用的是data，因此，与其用options创建组件，不如使用mixin并使用v-for循环数据。

// SelectData Mixin
const SelectData = {
  data() {
    return {
      options: [{
        value: 'animated bounce', text: 'bounce'
      }, {
        value: 'animated wobble', text: 'wobble'
      }, {
        value: 'animated bounceInLeft', text: 'bounceInLeft'
      }, {
        value: 'animated bounceOutDown', text: 'bounceOutDown'
      }]
    }
  }
}

然后，为了使用它，您只需：

new Vue({
  el: '#app',
  mixins: [SelectData],
  data: {
    selected: 'animated bounce'
  }
})

由于混音被合并到您的Vue实例中，所以options现在可以在模板中使用：

<select v-model="selected">
  <option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>

这是JSFiddle：https://jsfiddle.net/dL7zxjc8/

当然，如果您只需要在一个组件中使用这些数据，那么您可以简单地在那个Vue实例中声明选项，而忽略混音。