vue--select父子组件通信

简介

github代码

1. 父组件(页面)传数据给子组件(select)
2. 选择select的时候,得到对应option
3. emit：发射 on:监听

目录

父组件(页面)传数据给子组件(select)

父组件

src/view/index.vue

:defaultGradeData="defaultGradeData"把数据传给子组件

<template>
    <div class="hello">
      <com-grade :defaultGradeData="defaultGradeData"></com-grade>
    </div>
  </template>
  
  <script>
  import comGrade from '../components/comGrade'
  export default {
    components:{
      comGrade
    },
    data () {
      return {
        defaultGradeData:[{"id":1,"name":"一年级"},{"id":2,"name":"二年级"},{"id":3,"name":"三年级"}],
      }
    }
  }
  </script>
  
复制代码

子组件

src/components/comGrade.vue

props:['defaultGradeData'],接收父组件传过来的数据,相当于在data里定义了defaultGradeData

<template>
    <div>
        <select>
            <option v-for="item in defaultGradeData" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
    </div>
</template>

<script>
export default {
    props:['defaultGradeData'],
    data(){
        return{
            gradeData:[]
        }
    },
    methods:{
        initData(){
            this.gradeData = this.defaultGradeData
        },
    },
    created(){
        this.initData()
    }
}
</script>

复制代码

效果

默认父组件(页面)得到子组件(select)的第一个option的id

父组件

src/view/index.vue

v-on:choonseGrageEvent="changeGrade"相当于<div v-on:click="openBtn"></div>,自定义一个事件，监听子组件发送过来的消息

<template>
    <div class="hello">
      <com-grade v-on:choonseGrageEvent="changeGrade" :defaultGradeData="defaultGradeData"></com-grade>
      {{gradeId}}
    </div>
  </template>
  
  <script>
  import comGrade from '../components/comGrade'
  export default {
    components:{
      comGrade
    },
    data () {
      return {
        defaultGradeData:[{"id":1,"name":"一年级"},{"id":2,"name":"二年级"},{"id":3,"name":"三年级"}],
        gradeId:'',
      }
    },
    methods:{
      changeGrade(grade){
        this.gradeId = grade
      }
    },
  }
  </script>
  
复制代码

子组件

src/components/comGrade.vue

关键代码

默认选中第1个，并且发送($emit)给父组件

this.selectGrade = this.gradeData[0].id
this.$emit('choonseGrageEvent',this.selectGrade)
复制代码

全部代码

<template>
    <div>
        <select v-model="selectGrade">
            <option v-for="item in defaultGradeData" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
    </div>
</template>

<script>
export default {
    props:['defaultGradeData'],
    data(){
        return{
            selectGrade:'',
            gradeData:[]
        }
    },
    methods:{
        initData(){
            this.gradeData = this.defaultGradeData
            this.selectGrade = this.gradeData[0].id
            this.$emit('choonseGrageEvent',this.selectGrade)
        },
    },
    created(){
        this.initData()
    }
}
</script>


复制代码

效果

在父组件(页面)选择子组件(select),得到option的id，并且显示对应的option

父组件

不修改

子组件

src/components/comGrade.vue

1. @change监听select标签变化
2. @change="chooseFn"发送给父组件

<template>
    <div>
        <select v-model="selectGrade" @change="chooseFn">
            <option v-for="item in defaultGradeData" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
    </div>
</template>

<script>
export default {
    props:['defaultGradeData'],
    data(){
        return{
            selectGrade:'',
            gradeData:[]
        }
    },
    methods:{
        initData(){
            this.gradeData = this.defaultGradeData
            this.selectGrade = this.gradeData[0].id
            this.$emit('choonseGrageEvent',this.selectGrade)
        },
        chooseFn(){
            this.$emit('choonseGrageEvent',this.selectGrade)
        }
    },
    created(){
        this.initData()
    }
}
</script>



复制代码

效果

父组件调用子组件的方法

关键代码 ref="grade" 和this.$refs.grade

<com-grade ref="grade" v-on:choonseGrageEvent="changeGrade" :defaultGradeData="defaultGradeData"></com-grade>
this.$refs.grade.initData()
复制代码

父组件全部代码

<template>
    <div class="hello">
      <com-grade ref="grade" v-on:choonseGrageEvent="changeGrade" :defaultGradeData="defaultGradeData"></com-grade>
      {{gradeId}}
      <button @click="gradeInit">gradeInit</button>
    </div>
  </template>
  
  <script>
  import comGrade from '../components/comGrade'
  export default {
    components:{
      comGrade
    },
    data () {
      return {
        defaultGradeData:[{"id":1,"name":"一年级"},{"id":2,"name":"二年级"},{"id":3,"name":"三年级"}],
        gradeId:'',
      }
    },
    methods:{
      changeGrade(grade){
        this.gradeId = grade
      },
      gradeInit(){
        this.$refs.grade.initData()
      },
    },
  }
  </script>
  
复制代码