zoukankan      html  css  js  c++  java
  • vue2 props双向数据绑定问题

    与vue1不同,vue2中的props已经改变了之前双向数据绑定的机制,理由是数据流过于复杂理解有困难?

    然后从父组件传向于子组件的props数据,子组件是不能再随意更改从props传来的数据了,因为父组件不会被通知到。

    解决的方案有不少,比如vuex,比如自定义事件。

    这里只列举自定义事件的解决方法,其实会用之后也特别简单。

    在子组件的方法里使用$emit方法吗,传两个参数,第一个是父组件写的自定义事件,第二个则是从子组件传进的参数。

    废话不多说,列举代码看的更爽!

    //子组件:
    <span @click="select(2,$event)" ></span>
    props:{
    selectType: {
    type: Number,
    default: ALL
    }
    select(type) { this.$emit('select',type); }

      

     //父组件
    <ratingselect @select="selectRating"></ratingselect>
    
    
    data() {
          return {   
            selectType: ALL,
           
          }
        },
    selectRating(type) {
            this.selectType = type;
          }

    如此而已。

  • 相关阅读:
    提问必备-如何有效的提问?
    通过jdbc驱动连接thriftserver
    在idea上使用springboot构建ssm项目(一)
    二柱子与他的计算题
    JavaScript
    表单格式化
    2020.10.09
    HTML书写规范
    下拉列表框 JComboBox
    用户登录界面
  • 原文地址:https://www.cnblogs.com/zhoujx1066/p/6650758.html
Copyright © 2011-2022 走看看