zoukankan      html  css  js  c++  java
  • 【vue】父子组件传递

    子组件接收父组件的数据可以使用props和bind进行
    父组件
    <abc :mydata="data"></abc> //监听子组件触发的changeHi事件,然后调用changeHi方法
    子组件:
    props:['cdata']//接收父组件传递
    <div>{{cdata}}</div>
     
    父组件要监听子组件的事件发生可以使用emit和on进行,子组件必须要触发事件,然后父组件才可以接收到。
    子组件:
    <div @click="add">{{data}}</div>

    methods: {
    add () {
    this.$emit('changeHi', this.data) //触发changeHi这个自定义方法,'this.data为向父组件传递的数据
    }
    }
    父组件
    <abc @changeHi="changeHi"></abc> //监听子组件触发的changeHi事件,然后调用changeHi方法

    methods: {
    changeHi(a) { // a为子组件传过来的数据
    a = a + "1";
    }
    }
     
    当然,还可以使用vuex进行数据传输,但使用vuex一般是中大型项目,小型项目的话就自定义事件进行父子组件传输,兄弟组件的数据传输的话可以使用event bus 或者是vue-event-proxy这个插件
  • 相关阅读:
    [NOI2007]生成树计数
    [NOI2009]变换序列
    BZOJ3261 最大异或和
    [SHOI2011]双倍回文
    [TopCoder14647]HiddenRabbits
    [HDU5709]Claris Loves Painting
    [BZOJ4559][JLOI2016]成绩比较
    [CF995F]Cowmpany Cowmpensation
    [TopCoder11557]MatrixPower
    [UOJ198][CTSC2016]时空旅行
  • 原文地址:https://www.cnblogs.com/kevinmajesty/p/10648052.html
Copyright © 2011-2022 走看看