Vue中 v-bind、v-model、以及父给子传值
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)'
父组件写方法:
更多推荐
所有评论(0)