vuejs: Component for <tr>, how to implement?

vue' import component
vue components library
vue' import component into component
vue nested components
vue component props
vue single file components
vue emit
vue reusable components

After reading docs & forums for hours... still have no answer.

Have the following JS/HTML:

Vue.component("my-component", {
    props: ["id"],
    
    render: function(h) {
        return h("tr", this.$slots.default);
    }
});
    
    
var vapp = new Vue();
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>

<table>
    <tr is="my-component" :name="yo">
        <td>
            <span v-text="name"></span>
        </td>
    </tr>
</table>

If the elements in the slot need access to data inside the component, then you need to use a scoped slot.

Since you are using a render function, the scoped slot is available as a function through this.$scopedSlots.default() and you pass it an object with the data you want to be made available to the scoped slot.

You also need to define the scoped slot in the template. Here is an example.

Vue.component("my-component", {
    props: ["id", "name"],
    
    render: function(h) {
        return h("tr", this.$scopedSlots.default({name: this.name}));
    }
});
    
    
var vapp = new Vue({ el:"#app"});
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>

<div id="app">
<table>
    <tr is="my-component" :name="'yo'">
      <template scope="{name}">
        <td>
            <span v-text="name"></span>
        </td>
      </template>
    </tr>
</table>
</div>

Components, keep-alive with Dynamic Components. Earlier, we used the is attribute to switch between components in a tabbed interface: <component  Learn Vue JS Online At Your Own Pace. Start Today and Become an Expert in Days. Join Over 30 Million People Learning Online with Udemy. 30-Day Money-Back Guarantee!

If you are using .vue files you can have the table row component defined like this:

<template>
  <tr>{{ name }}</tr>
</template>

<script>
  export default {
    name: 'table-row',
    props: ['name'],
  };
</script>

Then use it like this:

<table>
  <tr is="TableRow" name="Some name here"></tr>
</table>

Component Registration, In many Vue projects, global components will be defined using Vue.component , followed by new Vue({ el: '#container' }) to target a container element in the  Save time Searching at MyDeal. Search For Vue Js Developers with us!

<table>
    <thead>
        <!-- ...some th -->
    </thead>
    <tbody>
        <tr>
            <td>..</rd>
        </tr>
        <template> <row-component my-param="blabla"></row-component> <!-- component return full row <tr>...</tr>     --> 
        <some-other-recomponent my-par="blabla"></some-other-recomponent> <!-- component return full row <tr>...</tr>    -->
        </template>
    </tbody>
</table>

Dynamic & Async Components, Mapping an Array to Elements with v-for. We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in  The above is made possible by Vue’s <component> element with the is special attribute: <!-- Component changes when currentTabComponent changes --> < component v-bind:is = "currentTabComponent" > </ component > In the example above, currentTabComponent can contain either: the name of a registered component, or; a component’s options object

Single File Components, VueJS - Components - Vue Components are one of the important features of VueJS that creates custom elements, which can be reused in HTML. Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute.

List Rendering, In the Vue instance, we used the el property to plug into an element in the DOM. For a component, we use the template property to specify its HTML. Inside that  Then define the components you’d like to use in a components option: new Vue({ el : '#app' , components : { 'component-a' : ComponentA, 'component-b' : ComponentB } }) For each property in the components object, the key will be the name of the custom element, while the value will contain the options object for the component.

VueJS - Components, Vue.js Components. Components are single, independent units of an interface. They can have their own state, markup and style. Published  VueJS - Component inside of v-for. I am trying to render a list of objects from my Vue-Instance. Each object should use a component, so I put the component into the v-for-loop.

Comments
  • The example above works. Thanks a lot! Are these props, within the scoped slot, reactive? Did some example, seems like are not.
  • What about methods? May I supply event handlers to the scoped slot? P.S. Seems like vuejs forces me to work in data driven mode. But all I want is to enrich rendered, on server side, HTML.
  • @user2528473 What is passed will be reactive if you pass an observed property. In the example above, the prop is just a string, so it isn't. If a data property was passed it would be. You can pass functions through the scoped slot if you want, just add them to the object passed as the argument. It's true, Vue is a data driven library. The rendered DOM is intended to be a reflection of state.
  • I want to render HTML on server side and have vuejs component to enrich that table row with some functionality.