使用场景:
- 几个页面有相同的布局
- 在子组件筛选的时候触发父组件中的列表数据
父组件:father.vue
<sun ref="select" @handleselectdata="handleselectdata"></sun>
js
handleselectdata(){ alert(1); },
子组件:sun.vue
<template> <div class="dis-flex"> <el-select class="el-select-box" placeholder="订单类型" v-model="orderSelect.type" @change="handelSelectData" > <el-option :key="item.value" v-for="item in orderTypeTabs" :label="item.label" :value="item.id"> </el-option> </el-select> </div> </template> <script> export default { name: 'select', data() { return{ orderSelect: { type: '', }, orderTypeTabs: [{ id: 1, label: 'XX'},{ id: 2, label: 'XX1'},{ id: 4, label: 'XX2'}] } }, created() { }, methods: { handelSelectData(){ this.$nextTick(() => { this.$emit('handleselectdata'); }); }, } }; </script>
遇到的问题1:
父组件通过ref访问子组件中的数据
const childrenData = this.$refs.select.orderSelect;
报错
解决方案:
this.$nextTick(()=>{ const childrenData = this.$refs.select.orderSelect; })
问题2:子组件触发父组件中的方法,加自定义方法 @handleselectdata="handleselectdata"
子组件中的this.$nextTick可以不加,再次复看的时候,不加也能实现,不晓得为什么