vue在实际的工作当中,ref、attr、listeners 这三个属性是经常会使用到的。刚才开我也不太明白这三个属性的用法,后来在做项目的时候,我不得不去学习。
<template>
<div>
<button @click="fun">click</button>
<child ref="child" @test="test" @getList="getList"></child> <!--注意这一块内容中的 ref="child"-->
</div>
</template>
<script>
import child from '@/views/child'
export default {
data(){
return {
name:'xiaobing',
age:18,
sex:2,
id:null
}
},
created(){
this.getList();
},
methods:{
getList(){
console.log('getList');
},
fun(){
this.$refs.child.cid = 50; //这儿直接对子组件里data的属性进行赋值。那么,子组件的值就会做出相应的改变
this.$refs.child.dialogVisible = true;
}
},
components:{
child
}
}
</script>
<style>
</style>
<template>
<div>
<el-dialog
@open="open"
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动名称1">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
</el-form>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
return {
dialogVisible:false,
ruleForm:{
name:null,
title:null,
},
cid:null,
}
},
created(){
},
methods:{
ok(){
this.dialogVisible = false
this.$emit('getList',null)
},
open(){
let id = this.cid;
console.log(id);
},
handleClose(){
},
},
}
</script>
<style>
</style>
同样的,ref他不但可以对属性进行赋值(设置)和获取,而且它一样可以过通 this. r e f s . c h i l d . 方法名直接操作子组件里的方法。打个比方,子组件里有一个 g e t G o o d s ( p a r a m s ) 这样的方法,如果我们要在父组件里直接执行它,那么我们可以这样子弄 t h i s . refs.child.方法名 直接操作子组件里的方法。 打个比方,子组件里有一个 getGoods(params){} 这样的方法,如果我们要在父组件里直接执行它,那么我们可以这样子弄 this. refs.child.方法名直接操作子组件里的方法。打个比方,子组件里有一个getGoods(params)这样的方法,如果我们要在父组件里直接执行它,那么我们可以这样子弄this.refs.child.getGoods(参数)。
//------------------------------------分割线-------------------------------
attrs,它可以将父组件属性传递到子组件、孙组件…一直往下传递,只要子组件中添加了 v-bind=“$attrs”,它就能一层一层往下传递。当然 ,往下传递的前提就是子组件中的props 没有 父组件的属性。
//-----------------------分割线--------------------
listeners,它跟 a t t r s 相类似,只是它是从子级向上传递的,而传递的是方法,并非属性。当然,不管是 attrs相类似,只是它是从子级向上传递的,而传递的是方法,并非属性。 当然,不管是 attrs相类似,只是它是从子级向上传递的,而传递的是方法,并非属性。当然,不管是attrs 还是 l i s t e n e r s , 我们都需要在子组件中每一级都添加这么一段 < F o u r v − b i n d = " listeners,我们都需要在子组件中每一级都添加这么一段 <Four v-bind=" listeners,我们都需要在子组件中每一级都添加这么一段<Fourv−bind="attrs" v-on=“$listeners”> //Four是组件的名字