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

child.vue

<template>
  <div style="border:2px solid blue">
   This is child component
   <p>
       a:{{ReceiveA}} ,b:{{ReceiveB}} ,c:{{ReceiveC}}
   </p>
   <input type="text" v-model="val"/>
   <input type="button" value="Update C 值" @click="updateValue"></input>
   <input type="button" value="调用父页面方法" @click="test"></input>
  </div>
</template>

<script>
export default {
  name: 'child',
  props:["a","b"],//接收父页面传递的属性值
  data() { 
    return {
     val:-1,
     ReceiveA:this.a,
      ReceiveB:this.b,
      ReceiveC:this.c
    }
  },
  methods:{
      updateValue(){
          //update:属性名 ,可以更改父页面对应绑定的data 变量的值
         this.$emit("update:c",this.val);
      },
      test(){
          //tt 为父页面绑定的事件名，方法的实体为testFunc
        this.$emit("tt",this.val);
      }
  }
}
</script>

<style lang="" scoped>
</style>

View Code

关键字解释：

1.$ref :在任意元素标记中加入 ref="xxxx" 在对应vue 代码中可以通过 this.$refs.xxxx 来调用到这个对象

具体用法参看文档：https://cn.vuejs.org/v2/api/#vm-refs

2. props :接收属性，也可以定义为 props: {{a:String},....}

具体用法参看文档：https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-camelCase-vs-kebab-case

3.$emit: 调用父组件属性方法

具体用法参看文档：https://cn.vuejs.org/v2/api/#vm-emit

4.sync:子组件改变父组件的值

具体参考文档 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

二. 多层组件之间的嵌套传值

应用场景，A组件中有子组件B ，B组件中有组件C ，C调用A传递的属性或方法

通过VUEX 可以解决，但此处不作考虑。此处使用 $listener 和 $attrs 来解决跨组件传递的问题。

示例：

parent.vue

<template>
  <div>
    <div>This is parent Component</div>
    <div>
      <!-- 自定义属性a ,b ,c    自定义事件名tt @相当于v-on !-->
      <childComponent a="aaaaaaa" b="bbbbbb" :c.sync="para" @tt="testFunc"></childComponent>
    </div>
  </div>
</template>

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

View Code

chlid1.vue

<template>
  <div style="border:2px solid blue">
   This is child component1
   parent para:{{a}}
   <!-- 传递监听 和 属性!-->
   <childComponent2 v-on="$listeners" v-bind="$attrs"> </childComponent2>
  </div>
</template>

<script>
import childComponent2 from "./child2"; //引入一个组件
export default {
  name: 'child1',
  props:["a"],//接收父页面传递的属性值
 components: { childComponent2 }, //定义父子关系
  data() { 
    return {
     ReceiveA:this.a,
    }
  },
  methods:{
      updateValue(){
          //update:属性名 ,可以更改父页面对应绑定的data 变量的值
         this.$emit("update:c",this.val);
      },
      test(){
          //tt 为父页面绑定的事件名，方法的实体为testFunc
        this.$emit("tt",this.val);
      }
  }
}
</script>

<style lang="" scoped>
</style>

View Code

chlid2.vue

<template>
  <div style="border:2px solid red">
   This is child component2
   parent para: {{b}}
  <input type="button" value="调用方法" @click="$emit('tt','child2 Para')"></input>
  </div>
</template>

<script>

export default {
  name: 'child2',
  props:["b"],//接收父页面传递的属性值
  data() { 
    return {
    }
  },
  methods:{
     
  }
}
</script>

<style lang="" scoped>
</style>

View Code

结果图：

关键字解释： $listeners https://cn.vuejs.org/v2/api/#vm-listeners

$attrs https://cn.vuejs.org/v2/api/#vm-attrs

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

猜你喜欢