92-兄弟组件间的传值问题

最新推荐文章于 2024-03-06 13:51:03 发布

longfei815

最新推荐文章于 2024-03-06 13:51:03 发布

阅读量250

点赞数

分类专栏：前端基础知识文章标签： javascript vue.js 前端 html

本文链接：https://blog.csdn.net/jolinoy/article/details/125707390

版权

前端基础知识专栏收录该内容

75 篇文章 2 订阅

订阅专栏

92-兄弟组件间的传值问题

兄弟组件间的传值方式:
1 先子传父再父传子(不推荐)
2 中央事件总线(空的Vue对象)
3 Vuex状态管理(不是今天的内容)

中央事件总线(空的Vue对象)步骤有3步:
第1步: 创建一个空的Vue对象用来监听和触发自定义事件
第2步: 在需要被修改的组件中开启自定义事件监听
第3步: 触发第2步中的自定义事件
效果如下：点击“按钮2”，改变“按钮1”的颜色。

代码如下：

<!DOCTYPE html>
<html>
<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">
  <title>92-兄弟组件间的传值问题</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id='app'>
    <child1></child1>
    <child2></child2>
  </div>  
  <template id="tmpl1">
    <button :style="{backgroundColor:bgc}">按钮1</button>
  </template>
  <template id="tmpl2">
    <button @click="hdClick2">按钮2</button>
  </template>
  <script>
    /*
      兄弟组件间的传值方式:
      1 先子传父再父传子(不推荐)
      2 中央事件总线(空的Vue对象)
      3 Vuex状态管理(不是今天的内容)


      中央事件总线(空的Vue对象)步骤有3步:
        第1步: 创建一个空的Vue对象用来监听和触发自定义事件
        第2步: 在需要被修改的组件中开启自定义事件监听
        第3步: 触发第2步中的自定义事件
    */
    //  第1步: 创建一个空的Vue对象用来监听和触发自定义事件
    let bus = new Vue();

    let child1 = {
      template:"#tmpl1",
      data(){
        return{
          bgc:"red"
        }
      },
      created(){
        // 是一个生命周期函数之一(后面学)
        // 什么时候执行这里的代码?? 组件被刚创建的时候, 现在记成 页面一刷新就执行
        // 第2步: 在需要被修改的组件中开启自定义事件监听
        // bus.$on("自定义事件名", 事件函数)
        bus.$on("changeBgc",val=>{
            this.bgc = val
        });
      }
    }
     let child2 = {
        template: "#tmpl2",
        methods:{
          hdClick2(){
            // 修改按钮组件1的bgc数据
            // 第3步: 触发第2步中的自定义事件
            bus.$emit("changeBgc", "#ccc");
          } 
        }
      }
    new Vue({
      el:'#app',
      data:{
  
      },
      components:{
        child1, child2
      }
    })
  </script>
</body>
</html>