vue组件的通讯方式

vue组件的通讯方式一: Props

<template>
  <div class="child">
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  props: {
     msg: {
       typpe: String,
     },
  },
}
</script>

vue 组件的通讯方式二: $attrs

在 vue 中可以使用 $attrs 来接收父组件传递的数据(一些自定义的数据的不会动态改变的数据 )

<template>
  <div class="child">
    <div>{{ $attrs.title }}</div>
  </div>
</template>

vue组件的通讯的方式三: $parent

在子组件中可以使用 $parent 来获取的父组件中的数据

# 父组件
<script>
import Child from '@/components/Child.vue'

export default {
  data() {
    return {
      parentData: '父组件的数据'
    }
  },
  
}
</script>


# 子组件
<script>
export default {
  created() {
    // 打印的结构为 父组件的数据
    console.log(this.$parent.parentData) 
  },
}
</script>

vue中组件通讯的方式四: $listeners

$listeners 可以的获取到父级中 methods 中所定义的函数(不包含 .native 修饰的函数 ), 可以在子组件中的进行调用

# 父组件
<template>
  <div class="home">
    <Child @getData="getData"  />
  </div>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    getData() {
      return '$listeners'
    }
  }
}
</script>

# 子组件
<script>
export default {
  created() {
    const data = this.$listeners.getData();
  },
}
</script>

vue组件通讯的方式五: $emit

父组件在子组件上定义的自定义的事件, 在子组件中使用 $emit 来调用的父组件定义的自定义事件, 并子组件中的数据传递给父组件

# 父组件
<template>
  <div class="home">
    <Child @getChildData="getChildData"  />
  </div>
</template>

<script>
// @ is an alias to /src
import Child from '@/components/Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    getChildData(value) {
      console.log({
        childData: value
      })
    }
  }
}
</script>

# 子组件
<script>
export default {
  data() {
    return {
      msg: "子组件中的msg",
    };
  },
  created() {
    this.$emit('getChildData', this.msg)
  },
};
</script>

vue的组件通讯方式的方式六: $refs

使用 ref 给子组件定义一个别名, 然后使用 $refs 来获取子组件的实例, 就能够获取子组件的数据

# 父组件
<template>
  <div class="home">
    <Child ref="child1" />
    <button @click="getChildData">获取的子组件的数据</button>
  </div>
</template>

<script>
// @ is an alias to /src
import Child from "@/components/Child.vue";

export default {
  components: {
    Child,
  },
  methods: {
    getChildData() {
      console.log(this.$refs["child1"].msg);
    },
  },
};
</script>


# 子组件
<script>
export default {
  data() {
    return {
      msg: "子组件中的msg",
    };
  },
};
</script>

vue的组件通讯的方式七: $children

$children 的方式跟的 $refs 来获取子组件的数据的使用方式基本上是一样的, 只不过 this.$refs 获取到的是一个 对象 , 而 $children 获取的到是一个 数组

vue的组件通讯方式八: provide,inject

provide 和 inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

# 父组件
<template>
  <div class="home">
    <Child ref="child1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Child from "@/components/Child.vue";

export default {
  name: "Home",
  provide: {
    foo: '我是的foo',
  },
  components: {
    Child,
  },
};
</script>

# 子组件
<template>
  <div class="child">
    {{ foo }}
  </div>
</template>

<script>
export default {
  inject: ["foo"],
};
</script>

vue组件通讯的方式九: event bus