vue的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"]

在子组件中便可以直接使用该值。