子元件向父元件傳值可以使用  $emit()  

我的理解是子元件通過$emit方法把自己的第一個引數eventName傳遞給父級，父級把eventName當成一個事件，觸發這個事件接收子級傳給自己的資料或執行操作

$emit ( eventName,args..)

引數eventName(必傳引數): 傳遞到父級的時間名

引數args(可選引數): 傳遞到父級資料（可以傳字串、陣列、物件、函式，我感覺啥都能傳）

注：1.args是一個引數列表，可以傳好多引數；

   2.一個子元件可以用多個$emit

例一是不傳args的情況，例二是傳多個args的情況

例1:

子級程式碼 （child.vue）

<!-- 子元件 -->
<template>
	<div id="child" @click="$emit(sendparent)"></div>
</template>

<script>
    export default {
	name: 'menuLeft',
	data (){
		return {
			
		}
	},
	methods: {
		
	},

}
</script>

父級程式碼 （parent.vue）

<!-- 父元件 -->
<template>
  <div id="parent">
    <menu-left @sendparent="helloFn"></menu-left>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    helloFn: function () {
      alert("hello world");
    },
  },
  created() {

  }
}
</script>


 

例2:

<!-- 子元件 -->
<template>
	<div id="child" @click="$emit(sendparent,'hello',function(){return 'world'})"></div>
</template>

<script>
    export default {
	name: 'menuLeft',
	data (){
		return {
			
		}
	},
	methods: {
		
	},

}
</script>

<!-- 父元件 -->
<template>
  <div id="parent">
    <menu-left @sendparent="helloFn"></menu-left>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    helloFn: function (param1,param2) {
      alert("hello world");
      alert(param2());
    },
  },
  created() {

  }
}
</script>


 

如果想在方法中呼叫$emit的話，寫成this.$emit()就OK了

差不多就這樣了，有問題在補充～～～～～