一、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)'

父组件写方法:

Logo

前往低代码交流专区

更多推荐