筆記2：vue元件傳值--子傳父（利用this.$emit）--比小白還白的理解

想做的事情就是：點選子元件中的按鈕，試圖修改父元件的內容（這個小例子只是利用傳值來修改的小栗子）

程式碼

子元件（S.vue）

<template>  
  <div class='son'> 
  {{sData}}    
  <div>{{smsg}}</div>  
  <div>  
  <button v-on:click="sendToFather">按鈕</button>  
  </div>  
  </div>
</template>
<script>
export default {  
  data(){    
  return {     
    sData:'我是兒子元件',     
    smsg:'我想把自己傳遞給父元件'    
    }  
  },
  methods:{    
    sendToFather(){    
        this.$emit("fevent",this.smsg)  
     }
    }
}
</script>
<style>
  .son{    
    color:blue;    
    border:1px  solid red;    
    width:300px;    
    height: 100px;}
</style>複製程式碼

父元件(F.vue)

<template>  
  <div class="baba">    
  {{fData}}    
  <div id="box">{{ff}}</div>    
  <S @fevent="toSon"></S>  
  </div>
</template>
<script>
import S from "../components/S.vue";
export default {  
  data() {    
    return {      
      fData: "我是霸霸元件",      
      ff: "本來父元件的內容"    
      };  
    },  
  components: {  S  },  
  methods: {    
    toSon(sdata) {      
      this.ff = sdata;    
      }  
    }
  };
</script>
<style>
  .baba {  
    color: darkgoldenrod;
    }
</style>複製程式碼

分析

和父元件給子元件傳值思路類似：

1. 子元件想要傳遞的值：

   smsg:'我想把自己傳遞給父元件'複製程式碼

2. 傳遞給父元件的方式（放在方法裡面，用函式來傳參）

   //  定義一個按鈕，給按鈕繫結用來傳參的點選事件  <button v-on:click="sendToFather">按鈕</button>
   
   //  用來傳參的點選事件methods:{    sendToFather(){    this.$emit("fevent",this.smsg)  }
   //  fevent是自定義的函式名字，父元件接收時，也是接收這個函式名。this.smsg就是子元件要傳的引數複製程式碼

3. 父元件接收子元件的請求

      <S @fevent="toSon"></S>
   
   //  接收的是來自子元件的請求，所以，繫結函式繫結給子元件，'toSon'就是具體用來實現修改的函式
   
   
   //  具體函式：
       methods: {    
         toSon(sdata) {      
         this.ff = sdata;    
       }  
      }
   //  這裡的sdata可以理解為用來接收子元件傳遞過來的引數（this.smsg）
   複製程式碼

4. 顯示
   

    <div id="box">{{ff}}</div>複製程式碼

效果圖：（...專屬於我的畫風？？？）

總結

用語粗糙，缺乏專業性術語以及分析。。。嗯。。。例子侷限性大。還遠。路還遠。

僅做筆記。