Question

我有2个下拉菜单如下：

 <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>

之后，我在选择中使用子组件。唯一的问题是子组件，其中主要div，选项周围引起问题。我已经尝试了很多寻找解决方案，但我不能这样决定发布我的问题

Answer 1

您在这里真正重用的是data，因此您应该使用mixin而不是使用options创建组件，并使用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'
  }
})

由于mixin已合并到您的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实例中声明选项并忘记mixin。

Answer 2

另一个解决方案是将整个选择放在子组件内部并传递给它＆＃34;动画在＆＃34;和＆＃34;动画输出＆＃34;其中这些是两个选择的文本，分别是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>

JS for child Component：

<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>

＆＃34;主要＆＃34;选项html元素周围的div不允许将它们插入父组件

2 个答案: