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;
        }
      }
    })
  • 相关阅读:
    Should I expose synchronous wrappers for asynchronous methods?
    .NET Memory Allocation Profiling with Visual Studio 2012
    Should I expose asynchronous wrappers for synchronous methods?
    Patterns for Asynchronous MVVM Applications: Commands
    WPF/SL: lazy loading TreeView
    Reusable async validation for WPF with Prism 5
    Entity Framework Code First
    ConsoleHelper 类
    [Forward]Sweeping the IDisposable minefield
    Enums and Lookup Tables with EF Code First
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9650398.html
Copyright © 2011-2022 走看看