你知道兄弟组件如何通讯传递吗?

发布订阅实现兄弟组件信息传递

原理

1.#app 里面有voteList,里面有很多响应式数据 ,多次调用了my-vote这个组件,相当于创建了my-vote的实例,父组件通过属性把title传给了props,my-vote里面有数据num=0(多少人参与投票),eventBus=new Vue实例,将eventBus分别通过props传给vote-content和vote-button
2. H3:title/num
3. vote-content supNum/oppNum/ratio props:[‘eventBus’]
数据渲染
4. this.eventBus. o n ( ′ x x x ′ , x x x ) 修 改 支 持 返 回 数 据 v o t e − b u t t o n 传 数 据 e v e n t B u s p r o p s : [ ′ e v e n t b u s ′ ] m y − v o t e 修 改 数 据 方 法 把 方 法 方 到 v o t e − b u t t o n 实 例 的 任 务 队 列 中 @ x x x = x x x t h i s . on('xxx',xxx) 修改支持返回数据 vote-button 传数据eventBus props:['eventbus'] my-vote修改数据方法 把方法方到vote-button实例的任务队列中 @xxx=xxx this. on(xxx,xxx)votebuttoneventBusprops[eventbus]myvotevotebutton@xxx=xxxthis.emit(‘xxx’)
this.eventbus.$emit(‘xxx’,xxx)


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .container {
            box-sizing: border-box;
            margin: 20px auto;
            padding: 10px;
            border: 1px solid #AAA;
            width: 300px;
        }

        .container h3 {
            font-size: 16px;
            line-height: 40px;
            border-bottom: 1px dashed #AAA;
            font-weight: bold;
        }

        .red {
            color: red !important;
        }
    style>
head>

<body>
    
    <div id="app">
        <my-vote v-for="item in voteList" :title="item.title">my-vote>
    div>

    <template id="MyVoteTemplate">
        <div class="container">
            <h3><span v-text='title'> span>(<span v-text='num'>span>)h3>
            <vote-content :eventbus='eventBus'>vote-content>
            
            
            <vote-button :eventbus='eventBus' @changeparent='changeParent'>vote-button>
        div>
    template>

    <template id="VoteContentTemplate">
        <div class="content">
            <p>支持人数:<span v-text='supNum'>0span> p>
            <p>反对人数:<span v-text='oppNum'>0span> p>
            <p>支持率:<span v-text='ratio'>0%span> p>
        div>
    template>

    <template id="VoteButtonTemplate">
        <div class="footer">
            <button type="button" class="btn btn-primary" @click="handle('support')">支持button>
            <button type="button" class="btn btn-danger" @click="handle('oppose')">反对button>
        div>
    template>

    <script src="../node_modules/vue/dist/vue.min.js">script>
    <script>
        //兄弟之间用eventBus,创建全部的vue实例;$on 是往里面加方法 ,$emit是执行方法 @xxx === eventBus.$on(xxx)
       // let eventBus = new Vue;
        //=>注册组件
        //=>在组件中调取渲染使用
        const VoteContent = {
            template: '#VoteContentTemplate',
            props:['eventbus'],
            data() {
                return {
                    supNum: 0,
                    oppNum: 0,
                }
            },
            computed: {
                ratio() {
                    let total = this.supNum + this.oppNum;
                    if (total === 0) {
                        return '0%';
                    }
                    return (this.supNum / total * 100).toFixed(2) + '%';
                }
            },
            methods:{
                changeNum(type){
                   type === 'support'? this.supNum++ : this.oppNum++;
                }
            },
            created(){
                //=>基于$on创建一个自定义事件把指定的方法方到任务队列中(创建一个实例就是创建一个任务队列)
                this.eventbus.$on('changesupport' , this.changeNum);
            }
        };
        const VoteButton = {
            template: '#VoteButtonTemplate',
            props:['eventbus'],
            data() {
                return {

                }
            },
            methods: {
                handle(type) {
                    //=>通知任务队列中changeParent这个自定义事件执行:第一个参数是自定义事件类型changeParent,第二个参数(后面的参数都是通知方法执行的时候,给方法传递的参数)

                    this.$emit('changeparent', type);
                    //=>通知eventBus任务队列中的changesupport自定义事件执行
                   this.eventbus.$emit('changesupport',type);
                }
            }
        };
        const MyVote = {
            template: '#MyVoteTemplate',

            props: {
                title: {
                    type: String,
                    //设置默认值,当 中为空,设置默认default数据
                    default: '我是设定的属性默认值',
                },
                aaa: {
                    //=>数据格式
                    type: [Number, Array],
                    //=>是否为必传,TRUE必须传递
                    //required:true
                    //=>自定义验证规则  val传递的属性值,在函数中,根据自己的规则,返回true和false来验证传递的值是否符合规则
                    validator(val) {
                        return val >= 0;
                    }
                }
            },
            data() {
                return {
                    num: 0,
                    eventBus:new Vue
                }

            },
            components: {
                VoteContent,
                VoteButton
            },
            methods: {
                changeParent(type) {
                    //=>this.$emit通知执行的时候传递的参数信息
                    this.num++;
                }
            }
        };
        let vm = new Vue({
            el: '#app',
            components: {
                MyVote
            },
            data: {
                voteList: [{
                        id: 1,
                        title: '前端细化'
                    }, {
                        id: 2,
                        title: '人工智能'
                    }

                ]
            },
        })
    script>
body>

html>

运行效果如下:
你知道兄弟组件如何通讯传递吗?_第1张图片

你可能感兴趣的:(实践真题系列,Vue系列,js系列)