How can I enter one element into another with Vuejs?

Question

How can I enter one element into another with Vuejs?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

0

How can I place an element within another element, created by the function component of Vuejs? I have my code created with the Vuejs template, but I want to create elements within other elements, but I get an error and it shows nothing. Let's say I want to be able to do something like this:

<div id="app">
<my-element id="element" v-for="data in 1000">
         <my-child id="child">{{ data }}</my-child>
</my-element>
</div>

And this is my Vuejs script:

new Vue({
  el: '#app',
  componentes: {
    my-element: {
      props: {
        id: ''
      },
      template: '<div class="content"></div>'
    },
    my-child: {
      props: {
        id: ''
      },
    template: '<div class="child"></div>
    }
  }
});

The official page of this template is here , is based on javascript.

javascript

asked by Eddy Otsutsuki 17.11.2016 в 03:27

source

3 answers

1

my-child must go within my-element

components: {
  'my-element': {
    props: {
      id: ''
    },
    template: '<div class="content"></div>',
    components: {
      'my-child': { ....
    }
  }
}

answered by 06.04.2017 в 20:44

1

If you do not want to use a slot, I recommend that you use an html file as a template and not the template tag. I had that problem.

template: require('./companies.html'),
props:{
}...

answered by 27.10.2017 в 17:43

Push notification certificates C # Is any conversion missing?

score 3 · Accepted Answer

Always remember to review the official documentation, here I leave something that may be useful. link

A scoped slot is a special type of slot that functions as a reusable template (to which you can pass data) instead of already-rendered-elements . In a child component, you can pass data within a slot as if you pass props to a component:

<div class="child">
  <slot text="hello from child"></slot>
</div>

In the parent component, there should be a <template> element with a special slot-scope attribute, indicating that it is a template for a scoped slot . The slot-scope value will be used as the name of a temporary variable that contains the last props object of the child component:

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

Once compiled it will look like this:

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>