How to pass html template as props to Vue component

前端未结

关注

 3  2134

时光取名叫无心 2021-01-06 01:28

I have a textarea component that include html tag and I want to get html in edit mode in this component. I use Laravel to

3条回答

别那么骄傲 (楼主)

2021-01-06 01:54

</code> components are treated as static by the Vue renderer, thus after they are put into the DOM, they don't change at all (so that's why if you inspect the DOM you'll see <code><slot></slot></code> inside your <code><textarea></code>).</p> <p>But even it if they did change, that wouldn't help much. Just because HTML elements inside <code><textarea></code>s don't become their value. You have to set the <code>value</code> property of the TextArea element to make it work.</p> <p>Anyway, don't despair. It is doable, all you need to overcome the issues above is to bring a small helper component into play.</p> <p>There are many possible ways to achieve this, two shown below. They differ basically in how you would want your original component's template to be.</p> <h2>Solution: change <code><textarea></code> into <code><textarea-slot></code> component</h2> <p>Your component's template would now become:</p> <pre><code><template> <div> <textarea-slot v-model="myContent" :name="name" :id="id"> <slot></slot> </textarea-slot> </div> </template> </code></pre> <p>As you can see, nothing but replacing <code><textarea></code> with <code><textarea-slot></code> changed. This is enough to overcome the static treatment Vue gives to <code><textarea></code>. The full implementation of <code><textarea-slot></code> is in the demo below.</p> <h2>Alternative solution: keep <code><textarea></code> but get <code><slot></code>'s HTML via <code><vnode-to-html></code> component</h2> <p>The solution is to create a helper component (named <code>vnode-to-html</code> below) that would convert your slot's VNodes into HTML strings. You could then set such HTML strings as the <code>value</code> of your <code><textarea></code>. Your component's template would now become:</p> <pre><code><template> <div> <vnode-to-html :vnode="$slots.default" @html="valForMyTextArea = $event" /> <textarea :value="valForMyTextArea" :name="name" :id="id">

In both alternatives...

The usage of the my-component stays the same:
```
   hello world
```
Full working demo:
```
Vue.component('my-component', {
  props: ["content", "name", "id"],
  template: `
      
          
                
          
          
          
          
                    
      
  `,
  data() { return {valueForMyTextArea: '', myContent: null} }
});

Vue.component('textarea-slot', {
  props: ["value", "name", "id"],
  render: function(createElement) {
    return createElement("textarea",
      {attrs: {id: this.$props.id, name: this.$props.name}, on: {...this.$listeners, input: (e) => this.$emit('input', e.target.value)}, domProps: {"value": this.$props.value}},
      [createElement("template", {ref: "slotHtmlRef"}, this.$slots.default)]
    );
  },
  data() { return {defaultSlotHtml: null} },
  mounted() {
    this.$emit('input', [...this.$refs.slotHtmlRef.childNodes].map(n => n.outerHTML).join('\n'))
  }
});

Vue.component('vnode-to-html', {
  props: ['vnode'],
  render(createElement) {
    return createElement("template", [this.vnode]);
  },
  mounted() {
    this.$emit('html', [...this.$el.childNodes].map(n => n.outerHTML).join('\n'));
  }
});

new Vue({
  el: '#app'
})
```
```
  
    hell
      o world1

    hello world2
  
```
Breakdown:
- Vue parses the s into VNodes and makes them available in the this.$slots.SLOTNAME property. The default slot, naturally, goes in this.$slots.default.
- So, in runtime, you have available to you what has been passed via (as VNodes in this.$slots.default). The challenge now becomes how to convert those VNodes to HTML String? This is a complicated, still open, issue, which may get a different solution in the future, but, even if it ever does, it will most likely take a while.
- Both solutions above (template-slot and vnode-to-html) use Vue's render function to render the VNodes to the DOM, then picks up the rendered HTML.
- Since the supplied slots may have arbitrary HTML, we render the VNodes into an HTML Template Element, which doesn't execute any

How to pass html template as props to Vue component

In both alternatives...

Full working demo: