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>
  
複製程式碼