【vue】父子组件之间通信

使用场景：

• 几个页面有相同的布局
• 在子组件筛选的时候触发父组件中的列表数据

父组件：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可以不加，再次复看的时候，不加也能实现，不晓得为什么

 

 

 

 

搜索

复制