父組件可以使用 props 把數(shù)據(jù)傳給子組件

• 在父組件的 script 標(biāo)簽中使用 import 引入 子組件，并在 components 中注冊
• 將子組件標(biāo)簽放在父組件的 template 里脑溢，并使用 v-bind:number = "n"的方式動態(tài)綁定（v-bind可以簡寫為：）
• 在子組件中定義 props:['number']僵朗，并使用{{ number }},將父組件傳送過來的數(shù)據(jù)展示在子組件中

代碼示例

父組件

<template>
  <div>
      <p>父組件：{{ n }}</p>
      <Son :number="n"></Son>
  </div>
</template>


<script>
import Son from "@/components/Son";

export default {
  data() {
    return {
      n: 0
    }
  },

  components:{
    Son
  }
}
</script>

子組件

<template>
  <div>
    <p>子組件：{{ number }}</p>

  </div>
</template>


<script>
export default {
  props:['number']
}
</script>

子組件可以使用 $emit 觸發(fā)父組件的自定義事件

• 在子組件中添加添加 methods，先在對應(yīng)方法中寫需要執(zhí)行的操作屑彻，例如this.count += 1;
• 在需要執(zhí)行的操作寫完后使用 this.$emit('numChange', this.count)验庙，將需要傳送的數(shù)據(jù) this.count 以 numChange 自定義事件傳送至父組件
• 在父組件中，template 內(nèi)子組件標(biāo)簽上添加綁定事件 v-on:numChange="getNewCount社牲，用于綁定父組件中接收處理子組件傳送數(shù)據(jù)的方法壶谒，即子組件傳來的數(shù)據(jù)需要經(jīng)過getNewCount處理
• 在父組件data中定義countFromSon:0，用于接收子組件傳回的值
• 在method中定義getNewCount函數(shù)膳沽，用于接收處理從子組件傳回的值
• 最后可以通過{{ countFromSon }}將從子組件傳回的值展示在父組件中

代碼實(shí)例

父組件

<template>
  <div>
    <p>父組件：{{ countFromSon }}</p>
    <Son @numChange="getNewCount"></Son>
  </div>
</template>


<script>
import Son from "@/components/Son";

export default {
  data() {
    return {
      countFromSon: 0
    }
  },

  methods: {
    getNewCount(val) {
      this.countFromSon = val
    }
  },

  components: {
    Son
  }
}
</script>

子組件

<template>
  <div>
    子組件：{{ count }}
    <button @click="add">+1</button>
  </div>
</template>


<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1;
      this.$emit('numChange', this.count)
    }
  }
}
</script>