web-dev-qa-db-ja.com

Vue.jsの「<slot> </ slot>」にあるテキストを参照する方法

Vue.jsにあるテキストを参照する方法は？

Vue.component('component', {
  template: `<button><slot></slot></button>`,
  created: function() {
    // i would like to access the text in slot here
  }
});
vue.jsvuejs2vue-component
6
Tadas Majeris

あなたが説明しているデフォルトスロット内のコンテンツは、Vueではthis.$slots.defaultとして公開されます。したがって、ボタン内のテキストを取得する最も単純な方法は、this.$slots.default[0].textを使用することです。

Vue.component('component', {
  template: `<button><slot></slot></button>`,
  created: function() {
    const buttonText = this.$slots.default[0].text;
  }
});

問題は、スロット内に複数のノードが存在する可能性があり、ノードが必ずしもテキストであるとは限らないことです。このボタンを検討してください：

<button><i class="fa fa-check"></i> OK</button>

この場合、スロットの最初のノードはテキストノードではないため、最初のソリューションを使用するとundefinedになります。

これを修正するには、レンダリング関数のVueドキュメントから関数を借用できます。

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

そして書く

Vue.component("mybutton", {
  template:"<button><slot></slot></button>",
  created(){
    const text = getChildrenTextContent(this.$slots.default); 
    console.log(text)
  }
})

これにより、結合されたスロット内のすべてのテキストが返されます。上記の例にアイコンがあるとすると、「OK」と返されます。

8
Bert

親から渡されたスロットテキストを取得する以下のコードスニペットを実行します。

私は使用しています "ref" ：

<span ref="mySlot">

this.$refs.mySlot.innerHTML

注意：<slot ref="refName"></slot>はhtmlでレンダリングされないため、<slot>は機能しません。 <slot></slot>を<div></div>または<span></span>でラップする必要があります

コード ：

Vue.component('component', {
  template: '<button>' +
              '<span ref="mySlot">' +
              
                  'Text before<br />' +
                  
                  '<slot name="slot1">' +
                      'Text by default' +
                  '</slot>' +
                  
                  '<br />Text after' +
                  
              '</span>' +
          '</button>',
  mounted: function() {
    console.log( this.$refs.mySlot.innerHTML);
  }
});

new Vue({
        el: '#app'
});
<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
  <component>
    <span slot="slot1">I'm overriding the slot and text appear in this.$refs.mySlot.innerHTML !</span>
  </component>
</div>
5
Happyriwan

スロット内のすべての子のinnerTextを結合することにより、スロットテキストにアクセスできます。

getSlotText() {
  return this.$slots.default.map(vnode => (vnode.text || vnode.Elm.innerText)).join('');
},
1
Vitim.us