Vue中 v-bind、v-model、以及父给子传值

一、v-bind

v-bind用于绑定一个或多个属性值，在本页面中显示数据

或者向子组件传递props值

1、用法：

v-bind='attribute'(等同于： attribute="attribute"   静态传值)   attribute是常量，可以定义在data中，也可以定义在computed中，在computed 中定义要给返回值

示例：

dom元素中：el-upload(ref='upload' v-bind='uploadConfig'）

computed中：

 uploadConfig() {

      return {

        action: this.action ? this.$ajax.baseURL + this.action: api.upload_Imgs,

        'file-list':this.pictureData,

        limit: this.limit,

              }

    },

vue官网上针对将一个对象的所有属性都传值的写法

当我们使用别人的组件，例如element时，传的属性值很多，可以用下面的方式进行包装，不写参数名，用v-bind

2、用法：

v-bind:attribute = "attribute"(等同于： :attribute="attribute"   动态传值)  attribute是变量

二、v-model在element组件中，用在表单组件中，可以实现数据双向绑定，而v-bind是单向的

三、父子传值

（一）父给子

1、属性传值，用props接收

2、使用refs调用方法和属性

调用子组件函数：

示例：

this.$refs['formModel'].validate((valid)

this.$refs['special-dialog'].open()

调用子组件属性：

示例：

let tableData = this.$refs.crud.getTableData()

（二）子给父

1、通过函数传值

在子组件里：

this.$emit('change', props)  ——[事件名称，所传参数]

在父组件dom元素中：

<child @change="changeFun(props)"></child>     ——props参数可以直接带过来

methods: {

        changeFun(){

                //  父组件对子组件传值进行逻辑处理

        }

}

！！！在dom元素中，如果也有要传递的参数，那么在dom元素里可以使用匿名函数，同时将子组件参数props和dom元素参数传递给方法里

<child @change= "props=>changeFun(props, index1, index2)"></child>    ——index1和index2都为dom元素上的参数

props是子组件参数，写成匿名函数的形式，后面是dom上的变量

示例：

1、子组件中：

 

2、父组件绑定emit里回执的函数名

 【注意】写成@edits='edits'，而不是@edits='edits(row)'

父组件写方法：