父子間組件的傳值，子組件自我使用的解決辦法

我在上一篇說了一下父子組件之間是如何傳值的，今天說一會兒組件若是須要改變傳過來的數據供本身使用。

 

1、 子組件須要改變傳來的值而後使用

1. 定義一個局部變量，並用 props 的值來初始化它

在 App.vue 中

<template> <div class="hello"> <h3>我是 App 父組件</h3> <h4>訪問本身的數據：{{msg}},{{name}},{{user.id}}</h4> <hr> <!-- 1. 在調用子組件時，綁定想要獲取的父組件中的數據 --> <Hello :message="msg"></Hello> </div> </template> <script> // 引入 Hello 組件 import Hello from './assets/components/Hello.vue' export default { data(){ return { msg:'父組件', name:'tom', age:'22', user:{ id:1234, userName:'Jack' } } }, // 註冊 Hello 組件 components:{ Hello } } </script> 

在 Hello.vue 中

<template> <div class="hello"> <h3>我是 hello 子組件</h3> <!-- 在頁面中直接渲染便可 --> <h4>訪問父組件中的數據： {{msg}}</h4> <button @click="change">改變父組件的數據</button> </div> </template> <script> export default { // 2. 在子組件內部，使用 props 選項聲明獲取的數據，即接收來自父組件中的數據 props:['message'], data(){ return { // 定義一個局部變量，並用 props 的值來初始化它 msg:this.message } }, methods:{ // 定義一個方法，來觸發改變父組件的數據 change(){ this.msg = '我改變了父組件的數據' } } } </script> 

效果圖：

 

 

子組件改變父組件的數據

2. 定義一個計算屬性，處理 prop 的值並返回：

在 Hello.vue 中改動

<script> export default { // 2. 在子組件內部，使用 props 選項聲明獲取的數據，即接收來自父組件中的數據 props:['message'], data(){ return { // 定義一個局部變量，並用 props 的值來初始化它 msg:this.message } }, computed:{ // 定義一個方法，來觸發改變父組件的數據 change(){ return this.msg = '我改變了父組件的數據' } } } </script> 

當頁面渲染成功自動完成計算

 

 

 

2、子組件中改變傳過來的數據並同步到父組件

1. 使用 sync 修飾符，它會被擴展爲一個自動更新父組件屬性的 v-on 監聽器

在 App.vue 中把 template 的內容更改成

<template>
    <div class="hello"> <h3>我是 App 父組件</h3> <h4>訪問本身的數據：{{msg}}</h4> <hr> <!-- 1. 在調用子組件時，綁定想要獲取的父組件中的數據 --> <!-- .sync 會被擴展爲一個自動更新父組件屬性的 v-on 監聽器 --> <Hello :message.sync="msg"></Hello> </div> </template> 

在 Hello.vue 中更改成

<template> <div class="hello"> <h3>我是 hello 子組件</h3> <!-- 在頁面中直接渲染便可 --> <h4>訪問父組件中的數據： {{message}}</h4> <button @click="change">改變父組件的數據</button> </div> </template> <script> export default { // 2. 在子組件內部，使用 props 選項聲明獲取的數據，即接收來自父組件中的數據 props:['message'], methods:{ change(){ // 使用 .sync 時，須要顯式的觸發一個更新事件 // update 爲固定寫法，後面跟將要被改變的數據對象，接着寫替換的數據 this.$emit('update:message','我改變了父組件的數據') } } } </script> 

效果爲：

 

 

 

2. 能夠將父組件中的數據包裝成對象或數組，而後在子組件中修改對象的屬性

在 App.vue 中

<template> <div class="hello"> <h3>我是 App 父組件</h3> <h4>訪問本身的數據：{{user.userName}}</h4> <hr> <!-- 2. 在調用子組件時，綁定想要獲取的父組件中的數據 --> <Hello :user="user"></Hello> </div> </template> <script> // 引入 Hello 組件 import Hello from './assets/components/Hello.vue' export default { data(){ return { // 1. 在父組件中把數據寫成對象的形式 user:{ id:1234, userName:'Jack' } } }, // 註冊 Hello 組件 components:{ Hello } } </script> 

在 Hello.vue 中

<template> <div class="hello"> <h3>我是 hello 子組件</h3> <!-- 5. 在頁面中直接渲染便可 --> <h4>訪問父組件中的數據： {{user.userName}}</h4> <button @click="change">改變父組件的數據</button> </div> </template> <script> export default { // 3. 在子組件內部，使用 props 選項聲明獲取的數據，即接收來自父組件中的數據 props:['message','user'], methods:{ // 4.直接修改 user 對象中的數據 change(){ this.user.userName = 'Tom' } } } </script> 

效果以下：

 

 

 

今天的分享就到這裏，若有不足，歡迎留言討論