Vue.js 如何在vue js中获取父组件在子组件中拥有的所有道具？

如何获得所有的道具，比如$store、$parent、$root，父组件在子组件中拥有的所有东西

所以我要创建一个父组件和一个子组件。 然而，我没有任何东西可以在孩子身上呈现。所以我正在创建一个无渲染子组件

import { Child } from "./components/child";

export default {
  name: "parent",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  created() {
    new Child().$mount();
  },
  mounted() {},
  methods: {},
};

import Vue from "vue";

const CHILD = {
  name: "child",
  components: {},
  props: [],
  data() {
    return {};
  },
  render() {
    return;
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

export const Child = Vue.extend(CHILD);

然而，我通过子组件以编程方式插入新的html元素

下面的代码是我挂载子组件的父组件

import { Child } from "./components/child";

export default {
  name: "parent",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  created() {
    new Child().$mount();
  },
  mounted() {},
  methods: {},
};

import Vue from "vue";

const CHILD = {
  name: "child",
  components: {},
  props: [],
  data() {
    return {};
  },
  render() {
    return;
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

export const Child = Vue.extend(CHILD);

这是我在网上找到的方法

这很好用。但是我没有在子组件中获得像

this.$store

、

this.$parent

和all（在父组件中自动可用）这样的道具

import { Child } from "./components/child";

export default {
  name: "parent",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  created() {
    new Child().$mount();
  },
  mounted() {},
  methods: {},
};

import Vue from "vue";

const CHILD = {
  name: "child",
  components: {},
  props: [],
  data() {
    return {};
  },
  render() {
    return;
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

export const Child = Vue.extend(CHILD);

这是子组件

import { Child } from "./components/child";

export default {
  name: "parent",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  created() {
    new Child().$mount();
  },
  mounted() {},
  methods: {},
};

import Vue from "vue";

const CHILD = {
  name: "child",
  components: {},
  props: [],
  data() {
    return {};
  },
  render() {
    return;
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

export const Child = Vue.extend(CHILD);

因此，基本思想是创建具有所有选项的子组件类，如

$store

$el

和all（vue提供的一切）。。。。但是我不想在模板中实例化它，而是想在父组件中实例化它们，如下所示：

newchild（{…props}）

那么这是可能的。我这样做是因为我的子组件是无渲染的。（但在子组件中，我正在创建Dom元素…&我之所以要扩展vue提供的所有功能，是因为这样我就不想编写自己的存储、自己的事件发射器、自己的道具绑定器…所有东西都将自动可用…）

关键要点是，我想手动创建子组件，就像调用

new Child（）

一样，而不是将它们注册为父级中的组件作为

组件：{'app-Child'：Child}

并在父级模板中实例化它们。。。除此之外，我还希望vue在子组件中提供所有功能。。类似于扩展vue

还有，我怎样才能听来自如上所述创建的子对象的事件

像这样的

// child 


created() {
this.$emit('event')
}




//parent 

mounted() {
this.child.$on('event', console.log)

}

资料来源：

---

否。我的意思是我不希望它以vue的方式实例化组件。。。我想做。由于某些原因，我不知道您的原因，但也许您应该创建新问题并在那里描述它（您试图解决什么问题）<代码>新建子组件（）。$mount（）不会创建任何子组件。它只是页面上全新的独立Vue实例。子组件也是无渲染的。（但在子组件中，我正在创建Dom元素……这太错误了。为什么要创建“无渲染”组件，然后手动创建DOM元素。完全没有意义。我上面有我的建议，不管你接受还是不接受……如果你想让它正常工作，你应该这样做。

Child

不应该手动调用。Vue提供的一种方法是

new Vue（…）

。很可能您有XY问题，需要用另一种方法解决。但是在提供的链接上，它是手动完成的…但即使我用

新Vue（…）的方式完成

我将如何在父级中装载/注册chid。由于此子级没有表示该子级的模板或html标记…我如何装载该子级…必须如上所示手动创建和装载该子级。因为它没有任何类似于

的html标记。我想这样做

新建子级（）

因为我与模板没有任何关系…所以事件发射和道具传递必须通过这个child实例完成。。。