概述
一.将点击事件由子组件传递到父组件
子组件:@click="success"
success(){ this.$emit("success//父组件接受的click事件//",data//data是通过子组件向父组件的传值//)}
父组件:在父组件里面import组件后,在调用的标签中写
@success="fatherMethod//父组件自己的方法//",而fatherMethod(data)中data即为子组件传递的数据
二.子组件的input值绑定父组件的方法
子组件中:
<input v-on:input="$emit("input",$event.target.value)">
父组件中:
<commenInput v-model="searchText//searchText便是父组件中绑定的input的值//"></commenInout>
三.子组件的值与父组件的值直接绑定在一起(非input)
子组件中:
定义一个将与父组件绑定的值:sonValue:1
在子组件的created方法里面为绑定赋初值: this.$emit("update:change",this.sonValue);
在子组件的任意需要修改该值的地方绑定更新(如下面的一个click事件):
changeSon(){
let that=this;
that.sonValue++;
that.$emit("update:change",that.sonValue);
},
父组件中:
定义一个get的值与之绑定
<componentA :change.sync="get" ></componentA>,
这样,get与sonValue就绑定在了一起
四.父组件传值到子组件:
父组件中:
<componentA :sendData="faData"></componentA>
子组件中:
props:["faData"]
在子组件中便可以直接使用该值。
最后
以上就是震动手套为你收集整理的vue的input等与父组件间的相互传值一.将点击事件由子组件传递到父组件二.子组件的input值绑定父组件的方法三.子组件的值与父组件的值直接绑定在一起(非input)四.父组件传值到子组件:的全部内容,希望文章能够帮你解决vue的input等与父组件间的相互传值一.将点击事件由子组件传递到父组件二.子组件的input值绑定父组件的方法三.子组件的值与父组件的值直接绑定在一起(非input)四.父组件传值到子组件:所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复