Vue 的父组件和子组件之数据传输、方法互调

前言

在vue的开发中，组件间的嵌套是一定会使用的技术。那在vue-cli 的使用是怎样的呢？

一、在父组件中调用子组件

步骤：

1. 创建一个子组件

   <template>
    <div>
      这里是子组件！！
    </div>
   </template>
   
   <script>
   export default {
     name: "Children",
     data() {
       return {
         
       };
     },
     props: {
       title:{
         type:String,
         default:"我是子组件！！"
       }
     },
   };
   </script>
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped lang="scss">
   </style>
   

2. 在父子间中引入子组件

   import children from "./children";
   

3. 将子组件挂载在父组件上

   export default {
     name: "parent",
     data() {
       return {};
     },
     components: {
       children: children
     }
   };
   

4. 在父组件中使用子组件

   <children></children>
   

二、父组件和子组件的数据传递

1. 父组件传递数据给子组件

   父组件传递数据给子组件有两个步骤：

   其一、在子组件设置数据接收点：

   在vue, 子组件接收父组件传递过来的数据需要用到属性 props。需要在子组件的props 的属性中先声明一个 子属性来接收父组件传过来的数据。

   export default {
     name: "Children",
     data() {
       return {
         
       };
     },
     props: {
       title:{
         type:String,
         default:"我是子组件！！"
       }
     },
   };
   

   上面的代码里，在 props 设定了一个子属性 title。同时，指定该属性的类型为 string ， 默认值为 “我是子组件！！”。

2. 其二，在父组件中使用子组件已经声明好的属性传递数据。

   <template>
     <div>
       这里是父组件！！
       <children :title="text"></children>
     </div>
   </template>
   
   <script>
   import children from "./children";
   export default {
     name: "parent",
     data() {
       return {
         text:'我是父组件!!'
       };
     },
     components: {
       children: children
     }
   };
   

   这里，父组件中声明一个变量text用于保存需要传递给子组件的数据。同时，在已经申明好的子组件标签中添加已经在props声明好的的属性 title，并且将两者进行动态绑定/赋值（将text值赋给title）。这里有两点要注意：

   1. 对title 赋值可以是字符串或者变量。如果是变量，这里就是属性绑定，需要在title添加‘:’。上面的例子就是将变量赋值给title.
   2. Props 的属性命名：在子组件中命名若为驼峰命名法，在父组件中应转化为短横线分隔命名法。
      e.g.
      子组件：props: ['postTitle']
      父组件：<children post-title="hello!"></children >

三、父组件调用子组件的方法

父组件想要调用子组件的方法需要用到 ref`属性。

假设，已经在子组件声明了一个方法childMethod。

首先，在自定义的子组件标签中定义一个ref 属性。

  <children :title="title" ref="children"></children>

然后，父组件声明一个方法，在方法中通过this.$refs.children.childMethod()调用子组件的方法。

<template>
 <div>
   这里是子组件！！
 </div>
</template>

<script>
export default {
  name: "Children",
  data() {
    return {
      
    };
  },
  props: {
    title:{
      type:String,
      default:"我是子组件！！"
    }
  },
  methods: {
    childMethod(){
      return "我是子组件！！";
    }
  },
};


<template>
  <div>
    这里是父组件！！
    <children :title="title" ref="children"></children>
  </div>
</template>

<script>
import children from "./children";
export default {
  name: "parent",
  data() {
    return {
      title:'我是父组件!!'
    };
  },
  components: {
    children: children
  },
  methods: {
    parentMethod(){
      this.$refs.children.childMethod();
    }
  },
};

四、子组件传递数据给父组件

子组件想要传递数据给父组件，需要通过调用父组件的方法来实现。具体做法，将放在子组件调用父组件一节。

五、子组件调用父组件的方法

子组件调用父组件的方法常用的有两种：

1. 通过$parent调用父组件的方法。

    methodOne(){
         this.$parent.parentMethod();
       }
   

   这里，在子组件声明一个方法，该方法调用了父组件的parentMethod 方法。该方法也可以带参数。故而，可以通过参数来实现子组件向父组件传递数据。

2. 通过$emit 触发父组件的事件实现调用父组件的方法。
   首先，在父组件中，给子组件标签绑定一个自定义事件。

   <children @parentMethod="parentMethod"></children>
   

   然后子组件，添加一个方法，通过$emit 触发该事件

    methodOne(){
           this.$emit('parentMethod');
       }
   

   该方法同样可以携带参数:

    this.$emit('parentMethod',"test");