Vue中父子組件之間值的傳遞

一、正向傳遞，由父組件→子組件傳值，不須要條件觸發，是主動傳遞的；在子組件定義props，而後在父組件傳入便可，如：

//在子組件內定義props
<script>
export default {
  props:['mark','sel']
</script>

<template><!--在父組件內傳入mark、sel-->
<Item txts="首頁" mark="1" :sel='selected'>
          <img src="../assets/img/1.png" slot="normalimg"/>
          <img src="../assets/img/6.png" slot="activeimg"/>
      </Item>
</template>

 

 

二、逆向傳遞，由子組件→父組件傳值，須要經過自定義事件觸發；

拋出自定義事件監聽的語法：

this.$emit('event',val)
//event:自定義事件的名稱
//val:傳入的值（可選填，能夠不填）

父組件上接受自定義事件監聽的語法：

<template>
 <component @event='fn'>
 </component>
</template>
<!--
component:任意組件
event:自定義監聽事件的名稱
fn:此處的方法名後面不寫小括號
-->


<script>
export default{
 methods:{
 fn:function(val){}
 //val:自定義事件從子組件傳來的值
 }
}
</script>