Vue組件是學習Vue框架最比較難的部分，而這部分難點我認為可以分為三個部分學習，其中之一就是組件的傳值。

?

搭建的框架目錄結構

一、父傳子動圖效果及源碼

父傳子源碼：

父組件：

子組件：

二、子傳父動圖效果

子傳父源碼：

父組件：

子組件：

三、詳細解說組件傳遞過程：組件傳值模板

也可以說這部分的內容是將組件的傳遞過程的關鍵代碼給抽離出來了，幫助大家更好的理解如何使用傳值！

1.父--->子

?①屬性props?

子組件利用props接收父組件傳遞過來的數據?

? ? ? ? 指的是從外部設置的屬性，需子組件設置props屬性

注

意

事

項

props嚴格用于父組件與子組件之間的單向通訊，并且你不希望嘗試直接在子組件中更改props的值。否則，將收到類似這樣的錯誤信息“避免直接修改某個prop，因為當父組件重新渲染時，該值將被覆蓋” 這樣的錯誤。

父組件：

1.點擊事件進行傳值，在template中添加組件

給子組件發送一個消息

2.父組件自定義方法將data里的數據傳遞過去：

子組名稱>

data() {

? ? return {

? ? ? 自定義事件: ""

? ? };

? },

3.引用子組件：

import 子組件名稱 from "子組件路徑";

4.注冊子組件，注冊位置與methods同級：

components: {

? ? 子組件名稱

? },

5.在methods中寫入點擊事件

methods: {

? ? OK() {

? ? ? this.自自定義事件 = "傳遞過去的數據";

? ? }

? }

子組件：

1.定義個插糟，接收渲染傳遞過來的數據

2.接收父組件傳遞過來的值

export default {

? props: ["自定義事件"],

};

?②引用refs傳值??

父組件通過refs給子組件傳值?

父組件：

1.引用子組件：

import 子組件名稱 from "子組件路徑";

2.注冊子組件，注冊位置與methods同級：

components: {

? ? 子組件名稱

? },

3.看你是什么需求了，什么需求寫在什么函數下：

周期函數(){this.$refs.父組件名稱.子組件名稱=“傳遞的參數”}

4.聲明父組件名稱：

子組件名稱>

子組件：

1.聲明子組件：

子組件名稱組件名稱>

2.將子組件名稱定義到data中：

data(){return{子組件名稱：}}

2.子--->父

①屬性emit?

子組件：

1.利用插值表達式顯示傳遞過去的數據：

{{子組件數據}}

2.將變量定義到data中

export default {

? data() {

? ? return {

? ? ? 子組件數據: "子組件的數據"

? ? };

? },

}

3.點擊事件進行傳值，在template中添加組件：

OK

4.向父組件傳值，在methods下定義事件：

methods: {

? ? ok() {

? ? ? this.$emit("自定義事件", this.子組件數據);

? ? }

? }

};

父組件：

偵聽自定義事件

1.利用插值表達式，將子組件傳遞過來的數據顯示出來

{{插值表達式}}

2.將變量自定義到data中

export default {

data() {

? ? return {

? ? ? 插值表達式: ""

? ? };

? },

};

3.父組件自定義方法偵聽子組件傳過來的值：

子組名稱>

4.引用子組件：

import 子組件名稱 from "子組件路徑";

5.注冊子組件，注冊位置與methods同級：

components: {

? ? 子組件名稱

? },

6.在methods中偵聽子組件傳過來的值：

methods: {

? ? 自定義事件(子組件數據) {

? ? ? this.插值表達式 = 子組件數據;

? ? }

? }

?

球分享

球點贊

球在看

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。