vue2组件通信

原创

已于 2024-08-03 10:59:23 修改 · 640 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2024-03-23 11:05:33 首次发布

1.父子组件通信

（1）.Props 和 Events：父组件通过props向子组件传递数据，子组件通过`$emit`触发事件向父组件传递数据。

示例：

父组件：

<template>
  <child-component :parentStrData="parStr" :parentArrData="parArr" :parentObjData="parObj" :parentFunction="parFun" @childHandle="getChildVal" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
      ChildComponent
  },
  data() {
    return {
      parMessage: '我是父组件的属性',
      parStr: 'hello word',
      parArr: [1，2，3],
      parObj: { name: '小明', age: 18 }
    }
  },
  methods: {
    getChildVal(message) {
      console.log('子级传递过来的值：',message) // 输出：子级传递过来的值：我是子组件的数据
      // 调用父组件方法 ...
    },
    parFun(){
        console.log("父组件把这个方法传入子组件中,在子组件里可以直接调用。")
    },

    getParent() {
        console.log('父组件方法');
    }
  }
}
</script>

子组件：

子组件主动获取父组件中的数据和方法