前言

Vue中最常見的組件之間的通信方式有12種，分別為：props、$emit、sync、v-model、ref、$children / $parent、$attrs / $listeners、provide / inject、EventBus、 Vuex、 $root、 slot。

今天我們會(huì)詳細(xì)講解父?jìng)髯觩rops方式和子傳父￥emit以及非父子組件傳值。

一、父?jìng)髯?/h2>

props聲明：

父?jìng)髯拥膶?shí)現(xiàn)方式就是通過(guò)props屬性，子組件通過(guò)props屬性接收從父組件傳過(guò)來(lái)的值，而父組件傳值的時(shí)候使用 v-bind 將子組件中預(yù)留的變量名綁定為data里面的數(shù)據(jù)即可

定義方式：

字符串：

export default {
  props: ['foo'],
  created() {
    // props 會(huì)暴露到 `this` 上
    console.log(this.foo)
  }
}

對(duì)象方式：

export default {
  props: {
    title: String,
    likes: Number
  }
}

舉例：

父組件：

<template>
  <div id="app">
    <!--App props 配置方式    -->
    <student id="002" name="李四" sex="男" age="18"></student>
    <student id="003" name="王五" sex="女"></student>
  </div>
</template>
<script>
import student from "@/components/Student";
export default {
  name: 'App',
  components: {
    student
  }
}
</script>

子組件：

<template>
  <div>
    <h2 >學(xué)生ID:{{ id }}</h2>
    <h2>學(xué)生姓名:{{ name }}</h2>
    <h2>學(xué)生性別:{{ sex }}</h2>
    <h2>學(xué)生年齡:{{ age }}</h2>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "student",
  data() {
    return {}
  }, 
  // 聲明  接收app傳遞過(guò)來(lái)的數(shù)據(jù)
  props:['id','name','sex','age']
  /*methods:{
    up(){
      this.$props.name = '阿薩德';
    }
  },*/
  // 接收數(shù)據(jù)的時(shí)候限制數(shù)據(jù)的類型
  // props: {
  //   id: String,
  //   name: String,
  //   sex: String,
  //   age: Number
  // }
  // props:{
  //     id: {
  //       type:String,
  //       required:true
  //     },
  //     name: {
  //       type:String,
  //       required:true
  //     },
  //     sex: {
  //       type:String,
  //       required:true
  //     },
  //     age: {
  //       type:String,  // 類型
  //       default:'18', // 默認(rèn)值
  //       required:false, // 必要的  true  false
  //       validator: function (value) { //驗(yàn)證數(shù)據(jù)
  //         return value >= 1;
  //       }
  //     }
  //
  // }
}
</script>
<style scoped>
</style>

效果圖：

原理：所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，自然地將新的狀態(tài)向下流往子組件，而不會(huì)逆向傳遞。

這避免了子組件意外修改父組件的狀態(tài)的情況，不然應(yīng)用的數(shù)據(jù)流將很容易變得混亂而難以理解。

另外，每次父組件更新后，所有的子組件中的 props 都會(huì)被更新到最新值。（子組件中不能更待props值，會(huì)出現(xiàn)報(bào)錯(cuò)！）

二、子傳父

父組件：

<template>
  <div>
    <!--  通過(guò)父組件 給子組件綁定一個(gè)自定事件 實(shí)現(xiàn)子組件給父組件 -->
    <!-- ****** 傳遞數(shù)據(jù) -->
    <Student @zhangsan="getStudentName"></Student>
    <hr/>
    <Student ref="student"></Student>
  </div>
</template>
<script>
import Student from "@/components/Student";
export default {
  name: 'App',
  data() {
    return {}
  }, components: {
    Student
  }, methods: {
    getStudentName(name) {
      console.log("獲取到了學(xué)生的的信息" + name)
    }
  },mounted() {
    /*  $on(eventName) 監(jiān)聽事件 */
    /* Vue 為每個(gè)窗口 都提供了一個(gè) 事件接口  Events interface */
    this.$refs.student.$on('zhangsan',this.getStudentName)
  }
}
</script>

子組件：

<template>
  <div>
    <h2>學(xué)生姓名:{{ name }} </h2>
    <h2>學(xué)生性別:{{ sex }} </h2>
    <button @click="sendStudentName">點(diǎn)我傳遞學(xué)生信息</button>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      name: '張三',
      sex: '男'
    }
  },methods:{
    sendStudentName(){
      //  $emit 觸發(fā)事件   >>> $emit(eventName)
      this.$emit('zhangsan',this.name);
      // this.$emit('zhangsan',this.name,.,.,.,.,.,.);
    }
  }
}
</script>
<style scoped>
</style>

效果圖：

三、非父子組件

兄弟組件之間的數(shù)據(jù)傳遞，通過(guò) eventBus 來(lái)做中間的橋梁，傳輸方通過(guò) Bus.$emit('自定義事件名', 數(shù)據(jù))傳數(shù)據(jù)，接收方通過(guò) Bus.$on('自定義事件名', callback)接收數(shù)據(jù)，兩者之間的自定義屬性名保持一致

傳值思想其實(shí)是一致的，先使用$on定義一個(gè)全局事件，后面寫個(gè)回調(diào)函數(shù)，觸發(fā)這個(gè)事件執(zhí)行的方法，可以接參數(shù)bus.$on('msg',val=>{ })，msg就是全局事件，然后在想要獲取這個(gè)全局事件里面的值就調(diào)用他，不過(guò)這時(shí)候不是 this.emit 而是 bus . emit 而是 bus.emit而是bus.emit

A組件：

<template>
  <div>
    A組件:
    <span>{{elementValue}}</span>
    <input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，來(lái)做為中間傳達(dá)的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

B組件：

<template>
  <div>
    B組件:
    <input type="button" value="點(diǎn)擊觸發(fā)" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件來(lái)接收參數(shù)
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>

四、其他傳值方式

組件中可以使用 $parent和 $children獲取到父組件實(shí)例和子組件實(shí)例，進(jìn)而獲取數(shù)據(jù)$parent 當(dāng)前組件樹的根 Vue 實(shí)例。

如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會(huì)是其自己。

$children 當(dāng)前實(shí)例的直接子組件。

需要注意 $children 并不保證順序，也不是響應(yīng)式的。如果你發(fā)現(xiàn)自己正在嘗試使用 $children 來(lái)進(jìn)行數(shù)據(jù)綁定，考慮使用一個(gè)數(shù)組配合 v-for 來(lái)生成子組件，并且使用 Array 作為真正的來(lái)源。

總結(jié)：

父組件通過(guò) prop 給子組件下發(fā)數(shù)據(jù)，子組件通過(guò)事件給父組件發(fā)送消息

最后的最后賦一張借鑒來(lái)的圖供大家快速記憶：

到此這篇關(guān)于Vue中組件的傳值方式詳解的文章就介紹到這了,更多相關(guān)Vue組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論