vue--子组件修改数据传递给父组件

3人阅读 评论(0) 收藏 举报
分类:
子组件代码:
<span class="block positive" @click="select(2,$event)" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
<div class="switch" @click="toggleContent" :class="{'on':onlyContent}">
    <span class="icon-check_circle"></span>
    <span class="text">只看有内容的评价</span>
  </div>

methods: {
    select (type, event) {
      if (!event._constructed) {
        return
      }
      this.$emit('select', type)
    },
    toggleContent (event) {
      if (!event._constructed) {
        return
      }
      this.$emit('toggle')
    }
  }

父组件代码:

<ratingselect @select="selectRating" @toggle="toggleContent" :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>
methods: {
  selectRating (type) {
      this.selectType = type
      this.$nextTick(() => {
        this.scroll.refresh()//实时更新better-scroll的高度,$nextTick异步更新dom
      })
    },
    toggleContent () {
      this.onlyContent = !this.onlyContent
      this.$nextTick(() => {
        this.scroll.refresh()//实时更新better-scroll的高度,$nextTick异步更新dom
      })
    }
}


查看评论

angular2中父子组件的数据传递

父到子组件之间的数据传递父组件模板中引用子组件 // father template: ... //...` 其中”fatherItemName” 为父组件中的属性,[name] 为子组件的...
  • qq_34438958
  • qq_34438958
  • 2017-05-11 11:56:11
  • 3983

子组件向父组件传值,父组件向子组件传值

子->父例如:子向父传递flag在子组件中想要传出的的dom元素中添加事件@click=”sendFlag”;在vue的methods定义方法sendFlag(){ let flag=thi...
  • wangxinhao113906
  • wangxinhao113906
  • 2017-11-14 11:43:51
  • 213

子组件传递数据到父组件(vue.js)

父组件: app.vue
  • heartAndthink
  • heartAndthink
  • 2017-07-06 15:47:43
  • 1974

vue父组件与子组件间如何进行数据传递

vue父组件和子组件间怎么进行数据传递 父组件传递数据给子组件(可以通过props属性来实现): 由于组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让...
  • qilanbei
  • qilanbei
  • 2017-09-22 11:51:29
  • 2892

react native 子控件传递数据给父控件

/** * Created by fanxiaole on 17/3/24. * 需求 在子控件(select)中选择性别 在父控件(form)中获取这个值并提交 * */ //步骤 ...
  • hehe0705
  • hehe0705
  • 2017-03-24 15:47:06
  • 1923

Angular2父子组件之间数据传递:@Input和@Output (上)

为了让大家学习起来轻松、易懂,小编尽量做到篇幅短,语言通俗易懂,知识点分段来讲,以免太长了看起来很累,也很容易失去耐心阅读下去,希望大家理解和支持,同时希望大家点赞和分享出去,让更多的志同道合的朋友来...
  • long328583644
  • long328583644
  • 2017-07-09 17:01:42
  • 1983

Vue.js的组件(三)父组件与子组件的数据联系 之 子传父 之 自定义事件

父传子是单向的,子会因父的改变而改变,但父并不会因子的改变而改变。这是由于Vue.js怕父的数据会被使用者在不知情的情况下改变。但是,子还是可以绕一个圈,把自己的数据传给父。途径:自定义事件。在解释子...
  • oak160
  • oak160
  • 2017-03-22 17:19:59
  • 4031

angular2.0父子组件通信---如何通过组件属性将数据传递给子组件

1. input properties, typically adorned with @Input decorations. import { Component, Input } fro...
  • u010977147
  • u010977147
  • 2016-12-14 19:30:07
  • 2920

angular2父子组件的数据传递,父组件向子组件传递数据

父组件---->子组件 这是单一使用向子组件写入一组数据, 这样我们在my-component组件里面使用@Input() input: any;就可以取到传递过来的myvalue,my-co...
  • u012631731
  • u012631731
  • 2017-06-02 21:01:49
  • 1636

vue-子组件向父组件传值

子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 Do you like me? {{childWords}} methods: { ...
  • yu88288356
  • yu88288356
  • 2017-02-06 17:22:38
  • 28542
    个人资料
    等级:
    访问量: 1851
    积分: 161
    排名: 107万+
    文章存档