通過實例講解vue組件之間的傳值

更新時間：2022年09月15日 10:13:32 作者：KinHKin(五年前端)

通過Vuex共享數(shù)據(jù),官方給出的跨多組件傳遞數(shù)據(jù)的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue組件之間傳值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

目前在做vue的項目，用到了子組件依賴其父組件的數(shù)據(jù)，進行子組件的相關(guān)請求和頁面數(shù)據(jù)展示，父組件渲染需要子組件通知更新父組件的state，父子組件之間的傳值一般有三種方法：

父傳子
子傳父
非父子傳值

注意：

父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。

接下來，我們會通過實例代碼來看的更清晰，理解更容易：

1.父組件向子組件進行傳值

父組件代碼：

<template>
  <div>
    父組件：
    <el-input v-model="val" style="width:300px" />
    <child :value="val" />
  </div>
</template>
  
  <script>
  import child from './child.vue'
  
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父組件'
      }
    },
    components: {
      child
    },
  
  }
  </script>

子組件代碼：

<template>
 
    <div class="child">
        子組件： {{  value  }}
    </div>
 
</template>
  
  <script>
 
export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value']
 
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

2.子組件向父組件進行傳值

父組件代碼

<template>
  <div>
    父組件：
    <el-input v-model="val" style="width:300px" />
    <child :value="val" @bindMsg='msgFun' />
  </div>
</template>
  
  <script>
  import child from './child.vue'
  
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父組件'
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal,'childVal')
        this.val = childVal
      }
    }
  
  }
  </script>

子組件代碼

<template>
    <div class="child">
        子組件： {{  value  }}
        <el-button @click="$emit('bindMsg', '我是子組件')">點擊改變父組建數(shù)據(jù)</el-button>
    </div>
</template>
  
  <script>
export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value'],
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

3.非父子組件之間的傳值

.sync可以幫我們實現(xiàn)父組件向子組件傳遞的數(shù)據(jù)的雙向綁定，所以子組件接收到數(shù)據(jù)后可以直接修改，并且會同時修改父組件的數(shù)據(jù)

ref綁定在子組件上，引用的指向就是子組件的實例，父組件可以通過 ref 主動獲取子組件的屬性或者調(diào)用子組件的方法

父組件代碼

<template>
  <div>
    父組件：
    <el-input v-model="val" style="width:300px" />
    <el-button @click="childRefClick">父組件ref點擊</el-button>
    <child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />
  
 
  </div>
</template>
  
  <script>
  import child from './child.vue'
  
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父組件',
        data: ''
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal, 'childVal')
        this.val = childVal;
  
      },
      childRefClick() {
        //ref獲取子組件實例的屬性和方法
        const child = this.$refs.child
        console.log(child.name)
  
        child.childBtnClick("調(diào)用了子組件的方法")
      }
    }
  }
  </script>

子組件代碼

<template>
 
    <div class="child">
        子組件： {{  value  }}
        <el-button @click="childBtnClick">點擊改變父組建數(shù)據(jù)</el-button>
    </div>
 
</template>
  
  <script>
 
export default {
    name: 'App',
    data() {
        return {
            currenData: {}
        }
    },
    props: ['value', 'data'],
 
    methods: {
        childBtnClick(val) {
            console.log(val,'val')
            this.$emit('bindMsg', val || '我是子組件')
        },
    
    },
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

非父子組件之間的傳值方式還有slot插槽，vuex數(shù)據(jù)狀態(tài)管理器等等