当前位置：网站首页>92-兄弟组件间的传值问题

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

2022-07-19 05:05:00 【longfei815】

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>

 

原网站

版权声明
本文为[longfei815]所创，转载请带上原文链接，感谢
https://blog.csdn.net/jolinoy/article/details/125707390

边栏推荐

猜你喜欢

随机推荐