vue3?父子組件間相互傳值方式

更新時(shí)間：2022年06月29日 10:53:03 作者：騰夢(mèng)

這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3父子組件相互傳值

父向子傳值

父

<pie-chart :pieData="post_data.pid" />

父組件只需在子組件上聲明一個(gè)變量即可。 :代表變量，可以傳變量;否則只能傳常量

子

export default {
? ? props:['pieData'],
? ? setup(props,ctx) {
? ? ? ? const pie_data = props.pieData

子組件中需要在props中聲明需要接收的變量名，setup中需要引用props，賦值時(shí)用props.變量名接收。return出去就可以用了

子組件向父組件傳值

父

<submit class="submit" @e_flag="get_e_flag" />
?
const e_flag = ref(false);
? ? const get_e_flag = (e) => {
? ? ? e_flag.value = e;
? ? };

父組件需要聲明一個(gè)@方法get_e_flag接收子組件發(fā)送的值,在該方法中賦值給需要的變量

子

setup(props, ctx) {
? ? ……
? ? const spyder_go = () => {
? ? ? ? ctx.emit('e_flag',e_flag.value)

子組件中需要在setup中使用ctx，使用ctx.emit向父組件傳值。該方法需要調(diào)用，比如點(diǎn)擊或者onMounted

vue3父子組件傳值的注意事項(xiàng)

當(dāng)你在進(jìn)行父子組件傳值的時(shí)候報(bào)警告：

Property “value” was accessed during render but is not defined on instance.
at

warn]: Extraneous non-emits event listeners (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
at <ChilDen title=“” msg=“ooooo” onXxx=fn >
at

然而在vue2中就不報(bào)這個(gè)警告。

解決辦法：兩種

1.在接收的參數(shù)后邊跟上類型就OK（ts）

2.用emits:[‘接收你推送的事件’]（js）

以下是代碼分析

我用的是 ts+vue3

首選我們對(duì)比vue2來看，vue3在寫法發(fā)生了不小的變化，最典型的例子就是vue3通過ref，或者reactive實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式。因?yàn)閞ef和reactive的出現(xiàn)，使得vue3中父子組件的傳值方式也發(fā)生了變化

咱們先看下vue2中的寫法

父子組件傳值 props / this.$emit

父組件向子組件傳值：在子組件標(biāo)簽上綁定自定義屬性名(:child = ‘value’)，值是父組件要傳遞的數(shù)據(jù)，在子組件內(nèi)部通過props 屬性來接收 ‘自定義屬性名’，頁面在展示上，通過接收的 {{屬性名}} 顯示。（父子之間是上下傳值）
子組件向父組件傳值：在子組件標(biāo)簽上綁定自定義事件(@change= ‘change’)，子組件內(nèi)部通過 $emit 給該事件推送數(shù)據(jù) (this. $emit(‘綁定的自定義事件名’,this.數(shù)據(jù)))。父組件內(nèi)部通過“函數(shù)參數(shù)”接收。（子組件之間是平行傳值）

父組件

<template>
  <div>
    <children :title="title" @getChildren="getChildren"></children>
    <div>子組件說： {{ childrenAsk }}</div>
  </div>
</template>
<script>
  import children from "./children.vue"
  export default {
    data() {
      return {
        title: "我是父組件傳過來的值",
        childrenAsk: "" // 接收子組件傳值的賦值
      }
    },
    methods: {
      getChildren(val) {
        this.childrenAsk = val
      }
    }
  }
</script>

子組件

<template>
  <div>
    <div>父組件傳過來的值： {{ title }}</div>
    <button @click="askToFather">點(diǎn)擊發(fā)送給父組件</button>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      }
    },
    data() {
      return {
        askMsg: "這是我給父組件說的話"
      }
    },
    methods: {
      askToFather() {
        this.$emit("getChildren", this.askMsg) // 推送的的自定義事件
      }
    }
  }
</script>

但是vue3中，是不存在this的，vue3中將數(shù)據(jù)和函數(shù)都封裝在了setup中，那么vue3是怎么實(shí)現(xiàn)的呢？

我們知道vue3中的setup接收兩個(gè)參數(shù)，

第一個(gè)參數(shù)是props，即父組件向子組件傳遞的props值，
第二個(gè)值為context，這個(gè)值代表了當(dāng)前的上下文對(duì)象，

知道這個(gè)東西以后現(xiàn)在來實(shí)現(xiàn)vue3的父子組件傳值。

vue3中父傳子和vue2中的父傳子一樣，再次不做過多闡述，下面重點(diǎn)關(guān)注的是vue3的子傳父

父組件

<template>
  <div style="color: aqua">父組件</div>
  <button @click="uodata">給子組件</button>
  <h4>子傳過來的-- {{ children_msg }}</h4>
  <hr />
  <Children :title="msg" :msg="datamsg" @xxx="hh"></Children>
  {{ value }}
</template>
<script lang="ts">
	import Children from "./components/ChilDen.vue";
	import { defineComponent, ref } from "vue";
	export default defineComponent({
	  components: {
	    Children,
	  },
	  name: "App",
	  setup() {
	    let msg = ref("");
	    let datamsg = ref("ooooo");
	    function uodata() {
	      msg.value = msg.value + "44";
	    }
	
	    // ref的作用是實(shí)現(xiàn)響應(yīng)式， 如果沒有ref則不能實(shí)現(xiàn)響應(yīng)式（引用數(shù)據(jù)類型用reactive）
	    let children_msg = ref("");
	    console.log(children_msg, "children_msg");
	    function hh(val: string) {  // 警告解決辦法： 加類型
	      console.log(val, "val");
	      // 使用ref包裹的數(shù)據(jù)，需要通過 .value 的形式訪問他的值
	      children_msg.value = val;
	    }
	    return {
	      msg,
	      datamsg,
	      uodata,
	      hh,
	      children_msg,
	    };
	  },
	});
</script>

子組件：

<template>
  <div style="color: brown">子組件</div>
  <div>父組件傳過來的值為：{{ title }}-- {{ msg }}</div>
  <button @click="emitxx">給父組件</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ChilDen",
  props: {
    title: {
      type: String,
    },
    msg: {
      type: String,
    },
  },
  setup(prop, context) {
    // props 參數(shù)，是一個(gè)對(duì)象，里面有父級(jí)組件向子組件傳遞的數(shù)據(jù)，
    // 且是在子組件中使用props接收到的所有的屬性
    // 包含props 配置聲明且傳入了的所有屬性的對(duì)象
    console.log(prop, context);
    // context.attrs 可以查詢到在props中沒有定義的屬性
    // console.log(context.attrs.msg);
    function emitxx() {
      let ask = "nihao";
      // context作用是獲取上下文對(duì)象，
      // 如果setup寫法為setup(props, { emit })的方式的話，下面的context可以省略
      context.emit("xxx", ask);
    }
    return {
      emitxx,
    };
  },
});
</script>

看下效果