Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值

一.父子组件传值 

         要点1：父组件赋予子组件属性值，子组件通过props 来接收值。

        要点2：父组件可以通过 子组件对象($ref)，来调用子组件的属性以及方法

        要点3：子组件通过$emit 来调用父组件的方法

        示例如下：

         parent.vue   

<template>
  <div>
    <div>This is parent Component</div>
    <div>
      <!-- 自定义属性a ,b ,c   .sync用于子组件  自定义事件名tt @相当于v-on !-->
      <childComponent a="1" b="2" :c.sync="para" @tt="testFunc"></childComponent>
    </div>
    <div>C的值是：{{para}}</div>
  </div>
</template>

<script>
import childComponent from "./child"; //引入一个组件
export default {
  name: "parentComponent",
  components: { childComponent }, //定义父子关系
  data() {
    return {
      para: 31
    };
  },
  mounted() {},
  methods: {
    testFunc(p) {
      alert("这是父页面的方法" + p);
    }
  }
};
</script>
<style lang="" scoped>
</style>

View Code