Vue父子組建的簡單通訊之控制開關Switch

731947523發表於2019-03-03
Vue

       Vue在目前是很好的框架，第一次使用Vue開發專案，剛開始的時候在一個控制開關的元件都花費了很久的時間，問題解決了，把自己的一些小問題給記錄下來，方便以後看及幫助像我這樣的初級萌新解決遇到的相同問題。

問題: 父元件傳入值到子元件，子元件修改之後怎樣傳回到父元件 

父元件：內部首先要有三步

1、父元件中引用子元件

2、父元件中註冊子元件

3、在子元件上繫結傳值

父元件
<template>  
<div class="hello">
    <ul>
      <li @click="changeFlag">點選開關----------------父元件預設為{{flag}}</li>
    </ul>
    <v-child :childFlag=`flag` @parentChangeFlag=`parentChangeFlag`></v-child>  //第三部
  </div>
</template>
<script>
import child from `子元件地址`  //第一步
data(){
    return{
        flag:false   }},
components:{
     `v-child`: child   //第二步
}
</script>
在第三步驟裡，繫結了一個childFlag傳給子元件,其值為flag複製程式碼
子元件
<template>  
<div class="hello">
    <ul>
      <li @click="parentChangeFlag">顯示{{childFlag}}---子元素:{{flag2}}</li>
      <li @click="parentChangeFlag" v-show="childFlag"><img src="./images/ios_switch_off.png" alt=""></li>
      <li @click="parentChangeFlag" v-show="!childFlag"><img src="./images/ios_switch_on.png" alt=""></li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    childFlag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      flag2:this.childFlag
    };
  },
   watch:{
    childFlag(flag2){
      this.flag2 = this.childFla
    }
  }，  
methods:{
    // 子元件傳值給父元件
    parentChangeFlag(){
      this.flag2 = !this.flag2
      this.$emit(`parentChangeFlag`,this.flag2)
    }
  }
};
</script>複製程式碼

在父元件裡，傳了一個childFlag下來，我們要在子元件裡去接收，方式用props,具體的可以看官方文件,
建立接收之後呢，我們需要把傳進來的值繫結給我們子元件的data值即(flag2),完成這一步的話，我們就完成了父元件往子元件進行傳值。

         上面只是完成了父傳子，下面講述怎麼子傳父

子元件所需做的事情:

      首先，我們需要在子元件裡進行改變其狀態值，這樣我們就建立了一個parentChangeFlag點選事件，進而改變當前的子元素的(flag2)值；

       其次，改變完當前的值，我們就要把子元素的狀態值給傳回父元件，這樣就用到了$emit方法，

this.$emit(`function`,Value);   function指父元件裡監聽子元素點選事件的函式；Value就代表你需要傳回父元素的值。

父元件所需做的事情:

        在父元件中，建立一個監聽子元素改變data值的函式(即@parentChangeFlag=`parentChangeFlag`)

  methods:{
    changeFlag(){ 
                       //父組建點選改變元素傳值給子元件
      this.flag = !this.flag
    },
    parentChangeFlag:function(flag2){
      //父元件監聽子元件點選的函式  flag2為子元件傳進來的值，把值賦給當前元素，就實現了父子之間的通訊
        console.log(flag2)
        this.flag = flag2
    }
  }複製程式碼

 當你完成父子元件各自所需要的工作時候，就恭喜你了，已經完成了Switch的效果，效果圖如下

我是萌新，有啥更好的也希望小夥伴們告訴我，一起進步，小夥伴要是感覺對你們有啟發，也可以給我點個贊?，感謝你的閱讀。

相關文章