Vue组件通信（呕心沥血）

zhang13pro

于 2020-08-22 00:55:56 发布

阅读量143

点赞数

分类专栏： Vue.js 关于框架文章标签： vue

本文链接：https://blog.csdn.net/weixin_38289787/article/details/108147678

版权

关于框架同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue.js

6 篇文章 0 订阅

订阅专栏

Vue中组件间的通信方式

父子组件传值
子父组件传值
兄弟组件通信

父子组件传值

复制是没有用的，最好跟着敲一遍，注意看看看注释，就能理解其中的逻辑了，大家加油

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>父组件向子组件传值</title>
</head>

<body>
  <div id="app">
    <!-- 使用组件 -->
    <Father></Father>
  </div>
  <template id="father">
    <!-- 唯一根元素 -->
    <div>
      <h3>父组件</h3>
      <!-- 子组件以标签化的形式嵌套在父组件上 -->
      <!-- 可以在父组件中直接赋值的方式传递数据 不过数据被写死了 -->
      <!-- <Son son_money="2500"></Son> -->
      <!-- 传递数据给子组件，使用单向数据绑定的方式将父组件的数据绑定到子组件的自定义属性上 自定义属性注意命名规范，中间不能不能不能有间隔线-->
      <Son :son_money="money"></Son>
    </div>
  </template>
  <template id="son">
    <!-- 唯一根元素 -->
    <div>
      <h6>子组件</h6>
      <p>从父组件接收到的数据是：{{ son_money }}</p>
    </div>
  </template>
</body>

<script src="./vue.js"></script>
<script>
  // 父组件 定义数据
  Vue.component('Father', {
    // 父组件的模板
    template: '#father',
    // 除了跟组件 定义数据都使用函数形式
    data() {
      return {
        money: 2000
      }
    }
  })
  // 子组件 接收数据
  Vue.component('Son', {
    template: '#son',
    // 子组件使用props选项接收父组件传来的数据，其实接收的数据Vue底层将它合并到data属性中，所以可以直接使用
    // props: ['son_money']
    props: {
      // son_money: Number     // props选项可以进行数据类型验证 不符合验证会给出警告⚠，但页面渲染不受影响
      son_money: {
        validator(value) {    //Vue还提供了validator函数验证，区别是它不仅能验证数据类型，还能验证数据大小
          return value > 3000
        }
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

</html>

子父组件传值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子组件向父组件传值</title>
</head>

<body>
  <div id="app">
    <Father />
  </div>
  <template id="father">
    <!-- 唯一根元素 -->
    <div>
      <h3>父组件</h3>
      <!-- 标签化嵌套子组件 -->
      <p>父亲的余额现在有：{{balance}}</p>
      <!-- 使用自定义事件形式将save方法绑定到子组件上 -->
      <!-- 自定义事件名可更改 -->
      <Son @dad_save="save" />
    </div>
  </template>
  <template id="son">
    <!-- 唯一根元素 -->
    <div>
      <h4>子组件</h4>
      <button @click="give">发红包</button>
    </div>
  </template>
</body>
<script src="./vue.js"></script>
<script>
  // 模拟一个父亲节发红包事件
  // 父组件 接收红包
  Vue.component('Father', {
    // 使用组件模板
    template: '#father',
    data() {
      return {
        balance: 10000
      }
    },
    methods: {
      save(value) {
        // value 参数是子组件传来的数据
        this.balance += value
      }
    }
  })
  // 子组件 定义红包
  Vue.component('Son', {
    template: '#son',
    data() {
      return {
        packet: 888
      }
    },
    methods: {
      give() {
        // 子组件通过 $emit 触发父组件绑定的方法 同时可以传递参数
        this.$emit('dad_save', this.packet)
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

</html>

兄弟组件通信

单独的事件中心管理组件间的通信，使用$on监听事件，$off销魂事件，$emit触发事件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兄弟组件间传值</title>
</head>

<body>
  <div id="app">
    <div>父组件</div>
    <brother-ze></brother-ze>
    <sister-meng></sister-meng>
  </div>
  <script src="./vue.js"></script>
  <!-- 模拟情景:熊孩子哥哥由于玩具争夺打了妹妹,妹妹于是委屈的哭了起来并向妈妈诉苦 -->
  <script>
    // 提供事件中心 监听组件事件
    var hub = new Vue()

    Vue.component('brother-ze', {
      data: function () {
        return {
          num: 10
        }
      },
      // 模板字符串
      template: `<div>
                  <p>哥哥ze:我现在有{{num}}块积木</p>
                  <button @click='hit'>揍妹妹</button>
                </div>`,
      methods: {
        hit: function () {
          if (this.num < 10) {
            // 触发妹妹哭泣事件
            hub.$emit('meng-event', "委屈的哭了")
          } else {
            alert('没有揍妹妹的理由')
          }
        }
      },
      mounted: function () {
        // 监听事件 val是对方传来的数据
        hub.$on('ze-event', (val) => {
          this.num -= val
        })
      }
    })

    // 妹妹抢哥哥积木 除了自己积木变多以外 哥哥的积木也应该相应减少
    Vue.component('sister-meng', {
      data: function () {
        return {
          num: 0,
          cry: "向妈妈告发并"
        }
      },
      // 模板字符串
      template: `<div>
                  <p>妹妹meng:我现在有{{num}}块积木</p>
                  <button @click='rob'>抢积木</button>
                  <strong>{{cry}}</strong>
                </div>`,
      methods: {
        rob: function () {
          if (this.num < 10) {
            // 触发兄弟组件的事件
            hub.$emit('ze-event', 1)
            this.num++;
          } else {
            alert('哥哥的积木被抢光了')
          }
        }
      },
      // TODO mounted钩子函数一旦被触发 表示模板已经就绪了
      mounted: function () {
        // 监听事件 val是对方传来的数据
        hub.$on('meng-event', (val) => {
          this.cry += val
        })
      }
    })

    new Vue({
      el: '#app'
    })
  </script>
</body>

</html>

zhang13pro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通信（呕心沥血）

Vue中组件间的通信方式父子组件传值子父组件传值非父子组件传值兄弟组件传值父子组件传值复制是没有用的，最好跟着敲一遍，注意看看看注释，就能理解其中的逻辑了，大家加油<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫