简介
- 父组件(页面)传数据给子组件(select)
- 选择select的时候,得到对应option
- 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
@change
监听select标签变化@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>
复制代码