vue零散記錄

1.input 使用了v-mode繫結值，不需要在寫value；

2.子元件傳值給父元件：$emit

父元件可獲取子元件值：

舉例：

父元件：parentServe.vue

<template>
  <div>
    <child-serve   @colorShow="ifshowColor"><!-- 這裡是子元件傳來的事件colorShow-->
    </child-serve>
  </div>
</template>

<script>
import MagicEightBall from "../components/childServe"

export default {
  methods:{
    showAdvice(advice){
      alert(advice)
    },
  },
  components:{
    child-serve:"childServe"
  },}
</script>

子元件：

<template>
  <button @click="handleShowColor">
    我想彈窗傳值給父元件呢
  </button>
</template>

<script>
  export default {
    data () {
      return {
        colorShow:false
    },
    methods:{

     handleShowColor (event) {

      event.stopPropagation();

      if (this.colorShow) {

        this.colorShow = false

      } else {

        this.colorShow = true

      }

       this.$emit("colorShow",this.colorShow);//colorShow是事件，this.colorShow是值

    },

  }
</script>

3.父元件傳值給子元件的時候，是靜態傳值，如果子元件做操作，需要發起事件執行。

舉例：-待補充