1、父组件传值给子组件，首先在父组件声明值。
data() {
return {
data: 0
}
},
2、引用子组件的时候将值用属性的方式传递给子组件。
<!--通过属性传递给子组件-->
<!--通过方法改变改变值-->
<component2
:data="data"
@changeComponent1Data="component1DataChange"
>
</component2>
3、子组件用props接收来自父组件的值 。
props: {
//接收父组件传来的值
data: Number
},
4、子组件可以直接使用接收到的值。
<!--直接使用接受到的值-->
<h2>我是子组件接收到的父组件的data：我现在在子组件里面{{data}}</h2>
5、如果子组件要修改来自父组件的值，不能直接修改，要通过事件进行修改
首先子组件中点击事件绑定方法，
<!--绑定要求改变父组件值的事件-->
<el-button
type="primary"
@click="changeData"
>
点我改变父组件的值
</el-button>
方法调用$emit()事件，通过这个方法发送请求给父组件，
methods: {
/**
* 通过方法请求给父组件改变值
*/
changeData() {
this.$emit("changeComponent1Data", 1)
}
}
同时这个方法有两个参数，第一个是方法名（此方法名在父组件中用到）。第二个是父组件中方法的参数。
父组件绑定方法接收这个请求。（绑定的方法要和子组件传来的方法一样，即父组件中@后面的方法要个子组件中$emit()中的第一个参数一样）
<!--通过属性传递给子组件-->
<!--通过方法改变改变值-->
<component2
:data="data"
@changeComponent1Data="component1DataChange"
>
</component2>
同时在methods中定义这个方法，方法体中做数据处理。
methods: {
/**
* 父组件处理子组件发送的数据更改
* @param params
*/
component1DataChange(params) {
this.data += params;
}
}
6、因为vue是双向数据绑定，因此数据更新的时候页面上也会即时进行更新。
7、本文中给出案例是每点击一次按钮数字+1，按钮在子组件中，数字初始化在父组件中，数字在父子组件中都有展示。
代码如下:
父组件代码
<template>
<div style="border: 1px solid black;padding: 5px">
<h1>this is component1</h1>
<h2>我是父组件的data：我现在在父组件里面{{data}}</h2>
<!--通过属性传递给子组件-->
<!--通过方法改变改变值-->
<component2
:data="data"
@changeComponent1Data="component1DataChange"
>
</component2>
</div>
</template>
<script>
import component2 from './component2'
export default {
name: "component1",
components: {
component2
},
data() {
return {
data: 0
}
},
methods: {
/**
* 父组件处理子组件发送的数据更改
* @param params
*/
component1DataChange(params) {
this.data += params;
}
}
}
</script>
<style scoped>
</style>
子组件代码
<template>
<div style="border: 1px dashed red">
<h1>this is component2</h1>
<!--直接使用接受到的值-->
<h2>我是子组件接收到的父组件的data：我现在在子组件里面{{data}}</h2>
<!--绑定要求改变父组件值的事件-->
<el-button
type="primary"
@click="changeData"
>
点我改变父组件的值
</el-button>
</div>
</template>
<script>
export default {
name: "component2",
components: {},
props: {
//接收父组件传来的值
data: Number
},
data() {
return {}
},
methods: {
/**
* 通过方法请求给父组件改变值
*/
changeData() {
this.$emit("changeComponent1Data", 1)
}
}
}
</script>
<style scoped>
</style>注意：父子组件传值时，父组件传递的参数，数组和对象，子组件接受之后可以直接进行修改，并且会传递给父组件相应的值也会修改。
如果传递的值是字符串，直接修改会报错。
不推荐子组件直接修改父组件中的参数，避免这个参数多个子组件引用，无法找到造成数据不正常的原因。
官网说明：cn.vuejs.org/v2/guide/co…
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
