1、父組件傳值給子組件，首先在父組件聲明值。
2、引用子組件的時候將值用屬性的方式傳遞給子組件。
3、子組件用props接收來自父組件的值 。
4、子組件可以直接使用接收到的值。
5、如果子組件要修改來自父組件的值，不能直接修改，要通過事件進行修改
首先子組件中點擊事件綁定方法，
方法調用$emit()事件，通過這個方法發送請求給父組件，
同時這個方法有兩個參數，第一個是方法名（此方法名在父組件中用到）。第二個是父組件中方法的參數。
父組件綁定方法接收這個請求。（綁定的方法要和子組件傳來的方法一樣，即父組件中@后面的方法要個子組件中$emit()中的第一個參數一樣）
同時在methods中定義這個方法，方法體中做數據處理。
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>
效果圖如下
