componente vue this. $ niños siempre están vacíos

0

aquí está mi código:

<head>
  <meta charset="utf-8">
  <!--mobile friendly-->
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <selection>
    <selection-item></selection-item>
    <selection-item></selection-item>
  </selection>
</div>
<script>
  Vue.component("selection", {
    mounted: function () {
      var c = this.$children
      console.log(c)
    },
    template: `<div></div>`
  })
  new Vue({el: "#app"})
</script>
</body>

la salida es Array(0), pero en mi código, la selección tiene elementos de selección secundarios, entonces, ¿cómo obtener los elementos secundarios de la "selección" del componente vue "elemento de selección"

aquí está mi versión vue:

[email protected] ~/Dropbox/js/ro-js/node_modules/vue $ cat package.json |gr version
  "_nodeVersion": "8.4.0",
  "_npmVersion": "5.4.1",
  "version": "2.4.4"
1

Encuentro la solución: debería agregar una <slot></slot>plantilla de componente vue, aquí está el código de trabajo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--mobile friendly-->
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <selection>
    <selection-item></selection-item>
    <selection-item></selection-item>
  </selection>
</div>
<script>
  Vue.component("selection-item", {
    template: `<div>prpr</div>
  `
  })
  Vue.component("selection", {
    mounted: function () {
      var c = this.$children
      console.log(c)
    },
    template: `<div><slot></slot></div>`
  })
  new Vue({el: "#app"})
</script>
</body>
</html>
0

Basado en los documentos sobre $children:

The direct child components of the current instance. Note there’s no order guarantee for $children, and it is not reactive. If you find yourself trying to use $children for data binding, consider using an Array and v-for to generate child components, and use the Array as the source of truth.

Otra opción es utilizar el $slotsque contiene los componentes secundarios directos incluidos en la VNodeinterfaz .

Vue.component("selection", {
  mounted() {
    var children = this.$slots.default;
    
    //console.log(children);
  },
  template: `
    <div>
      <slot></slot>
    </div>`
});

Vue.component("selection-item", {
  template: `<div></div>`
});

new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <selection>
    <selection-item></selection-item>
    <selection-item></selection-item>
  </selection>
</div>

Si necesita los hijos como elemento HTML, estarán dentro de este mismo contenedor, bajo una propiedad llamada elm. También tenga en cuenta que a pesar del nombre singular, en this.$slots.defaultrealidad es una matriz. Entonces algo como

const children = this.$slots.default
  .map(vnode => vnode.elm)
  .filter(el => el.tagName === 'DIV');