时间戳

首页 > 解决方案 > 获取Vue中组件标签的内容

javascript - 获取Vue中组件标签的内容

问题描述

我刚开始玩 Vue。我想做这样的事情：

<snippet name="Select From Table">
  SELECT *
  FROM database.table
</snippet>

并让它产生一个链接，当单击该链接时，它会调用一个可以访问 SQL 的函数。

我尝试使用一个组件，但我不知道如何在 click 函数中获取 SQL，以便我可以使用它。Slots 看起来很有趣，但这似乎只在标签内部起作用，而不是在属性中起作用。

谢谢！

标签： javascriptvue.jsvue-component

解决方案

如果要获取插槽的内容，则必须循环this.$slots.slotName然后获取所需的 innerText 或 innerHtml。

PS：正如@Terry 提到的，允许客户端执行任何 SQL 命令将是一个巨大的安全风险。

就像下面的演示：

Vue.component('v-test',{
    template:`
        <div>
          <a @click.stop="addText()">{{current}}</a>
        </div>
    `,
    data () {
      return {
        current: 'Bla'
      }
    },
    methods: {
      addText: function () {
        this.current += 'Bla'
      }
    }
})
Vue.component('snippet',{
    template:`
        <div style="border: 1px solid grey" @click="getHtml()">
            <slot></slot>
        </div>
    `,
    methods: {
      getHtml: function () {
        alert(this.$slots.default && Object.values(this.$slots.default).map((item, index) => {
          return item.elm && (item.elm.wholeText || item.elm.innerText)
        }).join('\r\n'))
      }
    }
})

new Vue ({
  el:'#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <snippet>Test SQL ...</snippet>
        <br>
        <snippet><strong>Te<i>s<span>.</span></i>t</strong> SQL ...</snippet>
        <br>
        <snippet><strong>Test<v-test></v-test></strong> SQL ...</snippet>
    </div>
</div>

另一种解决方案是使用ref.

Vue.component('v-test',{
    template:`
        <div>
          <a @click.stop="addText()">{{current}}</a>
        </div>
    `,
    data () {
      return {
        current: 'Bla'
      }
    },
    methods: {
      addText: function () {
        this.current += 'Bla'
      }
    }
})
Vue.component('snippet',{
    template:`
        <div style="border: 1px solid grey" @click="getHtml()" ref="test">
            <slot></slot>
        </div>
    `,
    methods: {
      getHtml: function () {
        alert(this.$refs.test.innerText)
      }
    }
})

new Vue ({
  el:'#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <snippet>Test SQL ...</snippet>
        <br>
        <snippet><strong>Te<i>s<span>.</span></i>t</strong> SQL ...</snippet>
        <br>
        <snippet><strong>Test<v-test></v-test></strong> SQL ...</snippet>
    </div>
</div>

推荐阅读