zoukankan      html  css  js  c++  java
  • vuejs父子组件的数据传递

    在vue中,父组件往子组件传递参数都是通过属性的形式来传递的
    <div id='root'>
      <counter :count = '1'></counter>
      <counter :count = '2'></counter>
    </div>
    
    <script>
    var counter = {
      props:['count'],
        template:'<div>{{count}}</div>'
      }
      var vm = new Vue({
        el:'#root',
        components:{
          counter: counter
        }
    })
    </script>
    需求,在子组件被点击的时候+1,我们可能会这么写
    var counter = {
      props:['count'],
      template:'<div @click="handleClick">{{count}}</div>',
      methods:{
        handleClick:function(){
          this.count ++
        }
      }
    }
    这个时候页面上看上去是正常的,但是控制台会报错,为什么呢?
    vue中有个单向数据流的概念,也就是父组件可以向子组件传递参数,通过属性传,传递的参数可以随便的进行修改,但是反过来,子组件绝对不能去修改父组件传递过来的参数,只能用这个内容,但是不能修改这个内容
    之所以vue中有这个单向数据流的概念,原因在于,一旦子组件这个接收的数据并不是基础类型的数据,而是一个引用数据的时候,在子组件改变了数据,又可能接收的这个内容还被其他的组件所使用,这样不仅仅改了自身的数据,还会对其他对组件造成影响,所以vue中有个单向数据流,子组件不能改变父组件传递过来对数据
    那么,这里确实要改变这个count的值,现在不让我改,那要怎么实现这个功能呢?
    var counter = {
      props:['count'],
      data:function(){
        return {
          number:this.count
        }
      },
      template:'<div @click="handleClick">{{number}}</div>',
      methods:{
        handleClick:function(){
          this.number ++
        }
      }
    }
    这样实现,将父组件传递过来的参数赋值给子组件的number,再使用子组件自己的数据的时候,是可以进行更改的,而且也不会影响到父组件的数据



    子组件如何向父组件传递参数
    通过事件触发的方式,$emit
    <div id='root'>
      <counter :count = '3' @change = 'handleChange'></counter>
      <counter :count = '2' @change = 'handleChange'></counter>
      <div>{{total}}</div>
    </div>
    
    
    <script>
    var counter = {
      props:['count'],
      data:function(){
        return {
          number:this.count
        }
      },
      template:'<div @click="handleClick">{{number}}</div>',
      methods:{
        handleClick:function(){
          this.number += 2;
          this.$emit('change',2);
        }
      }
    }
    var vm = new Vue({
      el:'#root',
      data:{
        total:5
      },
      components:{
        counter: counter
      },
      methods:{
        handleChange:function(step){
          this.total += step;
        }
      }
    })
  • 相关阅读:
    开源blog搬家工具
    嵌入式语言Lua
    ChangeMan Version Manager Workstation 8.1 command line quick check in/out
    Mssql合并列值(三个关系表合并)
    心得——学习中做笔记应该做到哪
    MFC Dialog 透明渐变
    【转】SSDT&Shadow Hook的实现,完整代码。可编译
    ssdt 表结构及hook的一般理解
    <转>ssdt hook 源码
    【转】_declspec(naked) 使用
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9650398.html
Copyright © 2011-2022 走看看