Vue中获取组件标签的内容

Question

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

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

并生成一个链接，单击该链接会调用 function，该链接可以访问 SQL。

我尝试使用组件，但我不知道如何在点击 function 中获取 SQL 所以我可以使用它。 插槽看起来很有趣，但这似乎只在标签内部起作用，而不在属性中起作用。

谢谢！

Answer 1

如果你想抓取插槽的内容，你必须循环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>