vue使用$emit傳遞參數(shù)方式

更新時間：2024年04月18日 10:55:44 作者：榮~博客

這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue使用$emit傳遞參數(shù)

傳遞一個參數(shù)

1、子組件

this.$emit('getData','abcd')

2、父組件

<child @getData="getData"></child>
getData(data){
	console.log(data) // 'abcd'
}

傳遞多個參數(shù)

第一種方法

1、子組件

let obj = {
	data1: 'abcd',
	data2: 'abcdefg'
}
this.$emit('getData',obj)

2、父組件

<child @getData="getData"></child>
getData(data){
	console.log(data) // {data1:'abcd',data2:'abcdefg'}
}

第二種方法

1、子組件

this.$emit('getData','abcd','abcdefg')

2、父組件

<child @getData="getData(arguments)"></child>
getData(data){
	console.log(data[0],data[1]) // 'abcd' 'abcdefg'
}

對于$emit的用法

可以總結：

子組件通過$emit的方式，調用父組件中的事件,進行傳遞數(shù)據(jù)
$emit函數(shù)只能在子組件中使用

一、子組件

  <div>
    <!-- 1 給子組件綁定一個點擊事件 -->
    <el-button type="primary" size="small" @click="btnFn">我是子組件</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // 2 聲明事件處理函數(shù)
    btnFn() {
      console.log("點擊到了");
      // 3 子傳父
      // 執(zhí)行$emit函數(shù)，會調用父組件中名為sonEvent的函數(shù)再將"hello world"的值傳過去
      this.$emit("sonEvent", "hello world");
    },
  },
};
</script>

從上面子組件的代碼上看，我們可以知道，當子組件被點擊的時候，會觸發(fā)btnFn事件，再聲明btnFn()事件處理函數(shù)，之后執(zhí)行$emit函數(shù)，該emit函數(shù)會調用下面父組件中名為sonEvent的事件，并將“hello world”的值傳遞給父組件。

二、父組件

  <div id="app">
    <!-- 4 接收子傳父 @inputFn="fatInput" -->
    <!-- @sonEvent 與子組件this.$emit('sonEvent',...)起的名字一致 -->
    <son @sonEvent="sonFn"></son>
  </div>
</template>

<script>
import son from "./components/son.vue";
export default {
  name: "app",
  components: {
    son,
  },
  methods: {
    // 5 接收參數(shù)
    sonFn(data) {
      console.log(data);
    },
  },
};
</script>

父組件的sonEvent事件被觸發(fā)，調用sonFn函數(shù)，可以在控制臺上打印接收到子組件傳遞過來的值