【每日学习记录】【vue】父子组件之间的传值

最新推荐文章于 2024-08-18 13:53:12 发布

E_LK

最新推荐文章于 2024-08-18 13:53:12 发布

阅读量75

点赞数

分类专栏：学习记录 # vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_44649913/article/details/109839216

版权

学习记录同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

1.父组件通过属性props向子组件传值

2.由于单向数据流，子组件不能修改父组件的数据

可以在data里对父组件传递的数据进行克隆，之后修改自己data里的内容，而不是修改父组件传递的数据

<body>
  <div id="app">
    <counter :count="2" @change="handleChange"></counter>
    <counter :count="3" @change="handleChange"></counter><!-- //加了：表示双引号中的是js表达式而非字符串 -->
    <div>{{total}}</div>
  </div>
</body>
<script>
  var counter={
    props: ['count'],
    template:'<div @click="handleClick">{{number}}</div>',
    data : function(){
      return {
        number: this.count
      }
    },
    methods: {
      handleClick : function() {
        this.number+=2;
        this.$emit('change',2)//触发一个change事件，可以携带一个或多个参数
      }
    }
  }
  var vm= new Vue({
    el: '#app',
    components:{
      counter:counter
    },
    data : {
      total:5
    },
    methods: {
      handleChange:function(add){
        this.total+=add;
      }
    }
  })
</script>