关于Vue组件间的传值(1)---父子组件之间的传值

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情
在项目开发过程中，最常用到的便是：vue组件间的传值。以下是本人总结的vue组件间传值的几种传值方式。首先可以大致区分为父子组件之间的传值，兄弟组件之间的传值和跨组件之间的传值。该文章讲解第一部分:父子组件之间的传值。

1.props/$emit

• 父组件向子组件传值(props)

prop 可以通过动态赋值,向子组件传值。不过这是单向数据流的形式，父级prop的更新会向下流动给子组件，但时反过来则不行。因此，不应该在子组件中修改prop，否则会有警告。

父组件：(实例：需要向子组件传递id)

parent.vue文件中引入children组件

<children :data="id"></children>

子组件:

<script>
export default {
  props: ['id']  //接受父组件传递过来的id值
  mounted(){
      console.log(this.id);//像其他data中的值一样直接访问即可
  }
}
</script>

我们也可以为子组件定制验证要求，规定类型检查，是否必填，是否带默认值等。

props: {
    id：{
      type: String,  //类型检查
      default: '100', //默认值
      required: true,//是否规定必填
    }
  },

• 子组件向父组件传值（$emit）

  子组件

  想要向父组件传递info信息

  <script>
  export default {
    data(){
        return{
            info:'this is a message'
        }
    }
    methods:{
        sendData(){
             this.$emit('emitshow', this.info);
        }
    }
  }
  </script>
  

  父组件

  接收子组件传递的info信息

  <template>
    <my-component @emitshow="doSomething"></my-component>
  </template>
  <script>
  export default {
    methods:{
        doSomething(data){
            console.log(data);//即可打印出子组件传递过来的值
        }
    }
  }
  </script>
  

2.$parent、$children和$refs

• 子组件访问父组件可以使用$parent。$parent可以接受父组件的数据和调用父组件的方法，也可以修改父组件的数据，因此不常使用。故不作总结。

• 父组件获取子组件对象可以使用$children或$refs。

  1. $children

     父组件可以有多个子组件，$children返回的是一个组件实例数组，访问其中的子组件需要通过索引值。但是如果组件过多，就较为麻烦。因此如果是这种情况可以使用$refs。

     <template>
        <child1></child1>
        <child2></child2>
     </template>
     <script>
     export default {
       methods:{
           getData(){
             console.log(this.$children[1].data);//获取到组件1中的data变量的数据
             console.log(this.$children[2].name);//获取到组件2中的name变量的数据
           }
       }
     }
     </script>
     

  2. $refs

  可以通过ref给子组件指定一个特定的id，然后使用$refs对父组件进行访问。

  <template>
     <child1 ref="a1"></child1>
     <child2 ref="a2"></child2>
  </template>
  <script>
  export default {
    methods:{
      getData(){
         console.log(this.$refs.a1.data);//获取到组件1中的data变量的数据
         console.log(this.$refs.a2.name);//获取到组件2中的name变量的数据
       }
    }
  }
  </script>