vue 父组件、子组件对象改变_vue子组件改变父组件的值

1、父组件传值给子组件，首先在父组件声明值。

2、引用子组件的时候将值用属性的方式传递给子组件。

3、子组件用props接收来自父组件的值 。

4、子组件可以直接使用接收到的值。

5、如果子组件要修改来自父组件的值，不能直接修改，要通过事件进行修改

首先子组件中点击事件绑定方法，

方法调用$emit()事件，通过这个方法发送请求给父组件，

同时这个方法有两个参数，第一个是方法名(此方法名在父组件中用到)。第二个是父组件中方法的参数。

父组件绑定方法接收这个请求。(绑定的方法要和子组件传来的方法一样，即父组件中@后面的方法要个子组件中$emit()中的第一个参数一样)

同时在methods中定义这个方法，方法体中做数据处理。

6、因为vue是双向数据绑定，因此数据更新的时候页面上也会即时进行更新

7、本文中给出案例是每点击一次按钮数字+1，按钮在子组件中，数字初始化在父组件中，数字在父子组件中都有展示

代码如下

父组件代码

this is component1

我是父组件的data：我现在在父组件里面{{data}}

:data="data"@changeComponent1Data="component1DataChange"

>

name:"component1",

components: {

component2

},

data() {return{

data: 0}

},

methods: {/**

* 父组件处理子组件发送的数据更改

* @param params*/component1DataChange(params) {this.data +=params;

}

}

}

子组件代码

this is component2

我是子组件接收到的父组件的data：我现在在子组件里面{{data}}

type="primary"@click="changeData"

>点我改变父组件的值

name:"component2",

components: {},

props: {//接收父组件传来的值

data: Number

},

data() {return{}

},

methods: {/**

* 通过方法请求给父组件改变值*/changeData() {this.$emit("changeComponent1Data", 1)

}

}

}

效果图如下