admin 管理员组

文章数量: 887031

vue2 子传父，父传子,v

父传子

在components里面创建子组件aaaChild.vue

//子组件
<aaa-child :list="list" @add="add"></aaa-child>data() {return {list:[{name:'小明',age:18},{name:'小红',age:16}]}}

子传父

父

//设置自定义事件
<dyx-child @add="add"></dyx-child>//val是子组件传过来的值methods: {add(val){console.log(val);}},

子

//随便设置一个事件
<button @click="add">点击</button>//用this.$emit()向父组件传值  第一个是绑定父组件的自定义事件  第二个是传递的值methods: {add(){this.$emit('add','12312312' )}}

 v-model 双向绑定

父

//自定义事件
<aaa-child v-model="name" @blurs="blurss"></aaa-child>//v-model绑定的数据data() {return {name:"123456"}}//自定义事件methods: {blurss(){console.log(this.name);}}

子

//用:value绑定数据  双向绑定需要用到@input
//@blur="blurs" 是失去焦点的事件
<input type="text" :value="value" @input="inputChange" @blur="blurs">//接受过来的数据用valueprops:{value:String}methods: {inputChange(e){this.$emit('input', e.target.value)},
//失去焦点事绑定父组件的自定义事件blurs(){this.$emit("blurs")}}

本文标签： vue2 子传父，父传子 v

版权声明：本文标题：vue2 子传父，父传子,v 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1715979208h660728.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。