Vue项目之父子通信

父子通信

1.子组件使用父组件的数据

步骤0：父组件中使用子组件
步骤1：在父组件里面的子组件中，设置属性，并绑定需要在子组件中使用的数据

此例中，父组件中的子组件Child1，设置了属性abc，并绑定了要在子组件中使用的数据a
步骤2：子组件要几首在父组件中设置的属性

接收属性，通过propis属性，属性值可以是数组，数组中的数据是要接收的属性名
此例中，Child1接收在父组件中设置的属性“abc”
步骤3：在子组件中，可以把接收到的属性，当做普通数据使用

一些需要注意的细节问题：
细节1： 一个数据不要起多个名字，所以设置属性时，要和数据名保持一致
**细节2：**子组件使用父组件的不一定是数据，给属性绑定或者设置成任何属性值都可以传递给子组件

此例中给属性a绑定的值是200，那么子组件接收到的a，值就是200
细节3： 子组件通过props属性接收时，设置成数组是简写，完全体是对象，可以对接收到的值进行限制

子组件在接收属性a时，限制了属性a的数据类型必须是数字类型，如果不是数字类型，则控制台会报警告
细节4： 把值传给子组件的是谁？
在父组件的子组件自己把值传给了子组件

父组件使用子组件的数据

父组件若想使用子组件的数据，需要在子组件中的派发事件，父组件中监听才可以
父组件中监听才可以
步骤0： 父组件中使用子组件
步骤1： 子组件中派发事件

通过$emit方法来派发事件。此例中子组件派发了事件‘abc’
$emit：
参数1：派发的事件名
参数2：要出传递的数据

派发事件abc的同时，传递数据b
步骤2： 父组件中，监听子组件派发的事件，并触发方法


在父组件中，监听子组件爱你派发的事件，并在监听到事件时触发方法的默认参数
此例中，监听abc事件，触发fn方法，fn方法的默认参数就是派发abc事件时，传递的数据
步骤3： 参数是局部变量，出了方法就失效。所以组件爱你想要使用传递过来的数据，就需要把这个数据和组件结合

组件中出了方法fn，就没办法使用传递过来的value。所以方法中，把value赋值给本地数据b，组件可以使用数据b

一些要注意的细节：
细节1： 派发的事件名和派发所在的方法名保持一致，父组件中，监听到事件时，触发的方法名要保持一致


细节2： 事件触发的方法中的参数名与接收到的数据名保持一致


细节3： 是谁在监听子组件派发的事件？
子组件在监听自己（谁派发谁监听）

案例代码

Parent.vue

<script>
import Child1 from "@/components/child/Child1.vue";
import Child2 from "@/components/child/Child2.vue";
export default {
  name:'Parent',
  components:{
    Child2,
    Child1
  },
  data(){
    return{
      a:'abc',
      b:0
    }
  },
  methods:{
    pass(b){
      this.b=b
    }
  }
}
</script>

<template>
  <div>
    <h3>父组件</h3>
    <Child1 :a="200"></Child1>
    <Child2 @pass="pass">
      <p>
        b：{{b}}
        b+100的值是：{{b+100}}
      </p>
    </Child2>
  </div>
</template>

<style scoped>

</style>

Child1.vue

<script>
export default {
  name:'Child1',
  props:{
    a:{
      type:Number
    }
  }
}
</script>

<template>
<h3>子组件1</h3>
<!--  {{abc}}-->
</template>

<style scoped>

</style>

Child2.vue

<script>
export default {
  name:'Child2',
  data(){
    return {
      b:100
    }
  },
  methods:{
    pass(){
      this.$emit('pass',this.b)
    }
  }
}
</script>

<template>
<div>
  <h3>子组件2</h3>
  <button @click="pass">传递</button>
</div>
</template>

<style scoped>

</style>