zoukankan      html  css  js  c++  java
  • 开关灯小案例(兄弟组件通讯)

    <!DOCTYPE html>
    <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">
      <title>Document</title>
      <style>
        /* 容器 */
    
        .container {
           150px;
        }
    
        /* 灯 */
    
        .light {
           100px;
          height: 100px;
          border-radius: 50%;
          text-align: center;
          line-height: 100px;
          margin: 0 auto;
          color: #fff;
          background-color: #000;
        }
    
        /* 开灯 */
    
        .turn-on {
          background-color: #ff0;
          color: #000;
        }
    
        /* 灯座 */
    
        .bottom {
           150px;
          height: 50px;
          margin-top: 10px;
          line-height: 50px;
          text-align: center;
          color: #fff;
          background-color: #000;
        }
      </style>
    </head>
    
    <body>
      <div id="app" class="container">
        <light-head></light-head>
        <light-bottom></light-bottom>
      </div>
      <script src="./vue.js"></script>
      <script>
        // 1 创建bus
        const bus = new Vue()
    
        // light-bottom 发送数据    - 触发事件
        // light-head   接受数据    - 注册事件
    
        Vue.component('light-head', {
          template: `
            <div class="light" :class="{ 'turn-on': isOn }">
              我是一盏灯
            </div>
          `,
    
          data() {
            return {
              isOn: false
            }
          },
    
          created() {
            // 注册事件
            bus.$on('light', (data) => {
              this.isOn = data
            })
          }
        })
    
        Vue.component('light-bottom', {
          template: `
            <div class="bottom">
              <button @click="turnOn(true)">开</button>
              <button @click="turnOn(false)">关</button>
            </div>
          `,
    
          methods: {
            turnOn(data) {
              // 触发事件
              bus.$emit('light', data)
            }
          }
        })
    
        var vm = new Vue({
          el: '#app',
          data: {
    
          }
        })
      </script>
    </body>
    
    </html>
    
  • 相关阅读:
    FFOM_秒交易行
    FFOM_脚本源代码
    农药_挂周金币
    保存数据,父页面列表数据更新
    点击按钮不弹出新窗口
    GridView1_RowDeleting 弹出确认对话框
    判断复选框
    获取Guid
    2019 gplt团体程序设计天梯赛总结
    Codeforces Round #550 (Div. 3)E. Median String
  • 原文地址:https://www.cnblogs.com/mushitianya/p/10528589.html
Copyright © 2011-2022 走看看