父子组件的数据传递

作者: puxiaotaoc | 来源:发表于2019-01-02 15:12 被阅读6次

Vue中组件间传值总结 ------ 2020-05-17
VUE组件通信的十种姿势
Vue 的组件之间如何通信
Vue 2.0 组件间数据传递
不同场景下组件的数据通信
#搭建Vue+TypeScript项目(五)
vue学习
React基础v2
组件通信方式
Vue-Prop

1、父组件通过:count="3"的方式向子组件传递参数，且子组件不能随意修改父组件传递过来的参数，但可以对参数的复本进行修改；
2、子组件通过$emit方法向父组件传递参数，并发布一个方法；

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

<head>
  <meta charset="utf-8">
  <title></title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id="app">
    <counter :count="3" @inc="handleIncrease"></counter>
    <counter :count="2" @inc="handleIncrease"></counter>
    <div>{{total}}</div>
  </div>

  <script>
    // :count="0"，不加:传的是一个字符串
    // 单向数据流:父组件可以随意的向子组件传递参数，但子组件不能随意修改父组件传递过来的参数,因为这个参数可能被多个子组件共用
    var counter = {
      props: ['count'],
      // 子组件复制一份父组件数据的复本可以对其进行随意修改
      data: function() {
        return {
          number: this.count
        }
      },
      template: '<div @click="handleClick">{{number}}</div>',
      methods: {
        handleClick: function() {
          this.number = this.number + 2
          this.$emit('inc', 2)
        }
      }
    }
    var vm = new Vue({
      el: '#app',
      components: {
        counter: counter
      },
      data: {
        total: 5
      },
      methods: {
        // step是this.$emit('inc', 2)传递的第二个参数
        handleIncrease: function(step) {
          this.total += step
        }
      }
    })
  </script>
</body>

</html>