vue.js - 如何在 Vue.js 中引用 '' 中的文本

Question

如何引用 Vue.js 中的文本？

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

Answer 1

注意:此答案仅适用于 Vue v2。

默认插槽内的内容，也就是您所描述的内容，在 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;
  }
});

问题是slot里面的节点可能不止一个，节点不一定是文本。考虑这个按钮:

<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”。