Vue中多组件之间传值与事件 ($attrs 和 $listeners) 的使用方式

cs_dn_Jie

已于 2024-06-05 14:39:01 修改

阅读量292

点赞数

分类专栏： Vue 传值文章标签： vue.js javascript 前端

于 2021-12-20 14:05:09 首次发布

本文链接：https://blog.csdn.net/cs_dn_Jie/article/details/122039994

版权

Vue 传值专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index 页面

<template>
    <div class="index">
        <el-button @click="isShow = true">{{isShowTitle}}</el-button>
        <ul class="uls" v-if="isShow">
            <onepage v-for="item in item" :handlesync.sync='isShow' :key="item.id" :datas='item' @handlechange='handleChange'> {{item.name}} </onepage>
        </ul>
    </div>
</template>

<script>
// 第一个组件
import onepage from './components/onePage.vue'
export default {
    name: 'index',
    components: {
        onepage
    },
    data() {
        return {
         isShow: false,
            item: [
                {
                    id: 1,
                    name: "张三"
                },
                {
                    id: 2,
                    name: '李四'
                },
                {
                    id: 3,
                    name: '王五'
                }
            ]
        };
    },
    methods: {
        handleChange(val) {
            this.item.filter(ele => {
                console.log('ele---->', ele.id);
                if (ele.id == val) {
                    ele.id = Math.floor(Math.random() * 1000)
                }
            })
        }
    },
     computed: {
        isShowTitle() {
            if (this.isShow == true) {
                return "关闭"
            } else {
                return "打开"
            }
        }
    },

};
</script>
<style scoped lang="scss">
.uls {
    margin: 0;
    padding: 0;
}
</style>

第二个组件

<template>
	// $attrs 监听数据 $listeners 监听事件 
    <twopage v-bind="$attrs" v-on="$listeners"></twopage>
</template>

<script>
// 第二个组件
import twopage from './twoPage'
export default {
    name: 'onePage',
    components: {
        twopage
    }
};

第三个组件

<template>
    <li class="two-page-lis" @click="handleChange(datas.id)">
        <span>{{datas.id}}</span>
        <span>---</span>
        <span @click="handleSync">{{datas.name}}</span>
    </li>
</template>

<script>
export default {
    name: 'twoPage',
    props: {
        datas: [Object]
    },
    methods: {
        handleChange(val) {
            this.$emit('handlechange', val)
        },
          handleSync() {
            this.$emit('update:handlesync', false)
        }
    },
};
</script>

<style scoped lang="scss">
.two-page-lis {
    list-style: none;
}
.two-page-lis:nth-child(odd) {
    background-color: orange;
}
.two-page-lis:nth-child(even) {
    background-color: purple;
}
</style>