vue2.0组件之间的传值以及方法的调用

代码中有详细的步骤，可以跟着步骤一步一步来，有问题下方留言，我会尽快回复。谢谢！
项目目录：

子组件传父组件：

1.子组件主要是用事件来传递数据给父组件的。
父组件内容：

<template>
  <div>
    <div>父组件</div>
    <!-- 5.使用注册好的组件以及子组件自定义的事件 来接收传递过来的数据 -->
    <Child @childToParent="child"></Child>
    {{childVal}}
  </div>
</template>
<script>
// 1.首先导入子组件
import Child from "./child.vue";
export default {
  name: "parent",
  data() {
    return {
      childVal: ""
    };
  },
  //   2.注册组件
  components: {
    Child
  },
  methods: {
    // 6.使用上面的方法（第五步）来接收操作传递过来的数据
    child(data) {
      this.childVal = data;
    }
  }
};
</script>

子组件内容：

<template>
  <div>
    <!-- 3.在子组件中定义方法来触发传递 -->
    <div @click="childClick">子组件（可点击）</div>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {};
  },
  methods: {
    childClick() {
      // 4.使用$emit 传递数据 ，有俩参数（自定义事件名，要传递的数据）
      this.$emit("childToParent", "子组件传父组件");
    }
  }
};
</script>

父组件传子组件：

父组件使用props来传递数据给子组件
父组件内容：

<template>
  <div>
    <div>父组件</div>
    <!-- 4.将 components中定义的组件写到你需要的地方 并且使用数据绑定的形式将你要传递的数据传递到子组件中-->
    <Child :age="age" :name="name"></Child>
  </div>
</template>
<script>
// 1.将子组件引入
import Child from "./child.vue";
export default {
  name: "parent",
  data() {
    return {
      // 3.这里定义你要传递的数据，也可以不定义
      name: "wanglei",
      age: 26
    };
  },
  // 2.在这里注册组件
  components: {
    Child
  }
};
</script>

子组件内容：

<template>
  <div>
    <div>子组件</div>
    <!-- 6.将接收到的数据渲染到页面 -->
    <div>{{name}}</div>
    <div>{{age}}</div>
  </div>
</template>
<script>
export default {
  name: "child",

  data() {
    return {};
  },
  //   5.子组件只用使用props接收父组件传递过来的数据就好了
  props: {
    name: String,
    age: Number
  }
};
</script>

父组件调用子组件的方法

父组件使用ref来进行调用子组件中的方法
父组件内容：

<template>
  <div>
    <div>父组件</div>
    <!-- 4.定义方法来触发子组件中的方法 -->
    <button @click="methodClick">触发子组件方法</button>
    <!-- 3.使用注册的组件 定义一个ref  -->
    <Child ref="child"></Child>
  </div>
</template>
<script>
// 1.引入子组件
import Child from "./child";
export default {
  name: "parent",
  data() {
    return {};
  },
  // 2.注册组件
  components: {
    Child
  },
  methods: {
    methodClick() {
      //   6. 使用上面的注册组件中的ref获取到子组件中的方法，并且调用即可
      this.$refs.child.childClick();
    }
  }
};
</script>

子组件内容：

<template>
  <div>
    <div>子组件</div>
    {{message}}
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
        message:""
    };
  },
  methods:{
    //   5.随意定义一个方法，为了让父组件那边调用
      childClick(){
          this.message = "调用了子组件中的childClick方法"
      }
  }
};
</script>

正好这段时间项目不是太急， 把之前的东西总结总结，希望对各位有所帮助。
未完待续…