父子组件通信props、emit学习笔记（一）

由于刚学前端就直接上的脚手架

用HTML方式实现有助于理解最终脚手架，细节&框架原理

父组件Father.vue

<template>
<div>
  <son :name="111" :age="34"></son>
  <son @dataVal1="receive"></son>
  <son :dataVal2.sync= 'subVal2' ></son>
</div>
</template>

<script>
import son from "./fatherCompont/Son";
export default {
  name: "Father",
  data(){
    return{
      subVal1:'',
      subVal2:'',
    }
  },
  components:{
    son
  },
  methods:{
    receive(data){
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>

子组件：son.vue

<template>
<div>
  son
  名字：{{name}}
  年龄：{{age}}
</div>
</template>

<script>
export default {
  name: "Son",
  props:['name','age'],
  data(){
    return{
      subVal:'son咻咻咻'
    }
  },
  mounted() {
    this.$emit('dataVal1',this.subVal)//发送方式1
    this.$emit('update:dataVal2',this.subVal)//发送方式1
  }
}
</script>

<style scoped>

</style>

运行结果