我是靠谱客的博主 震动手套,最近开发中收集的这篇文章主要介绍vue的input等与父组件间的相互传值一.将点击事件由子组件传递到父组件二.子组件的input值绑定父组件的方法三.子组件的值与父组件的值直接绑定在一起(非input)四.父组件传值到子组件:,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

一.将点击事件由子组件传递到父组件

子组件:@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)四.父组件传值到子组件:所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(37)

评论列表共有 0 条评论

立即
投稿
返回
顶部