Vue.js 打印原始 html 并调用组件方法

Posted 2023-02-23

【中文标题】Vue.js 打印原始 html 并调用组件方法

【英文标题】：Vue.js print raw html and call component methods

【发布时间】：2019-06-03 01:24:25

【问题描述】：

我正在从 ajax 请求动态加载 html 内容。这个 html 有一些按钮，比如

<button @click="someComponentMethod">Add</button>

如您所见，我正在尝试调用组件方法。但它不起作用。

我认为代替@click html 的默认属性“onclick”应该可以工作。但这只会识别在全局范围内定义的函数。有人可以指导我如何从核心 javascript 调用组件的功能，即使用“onclick”。

更新

好的！我知道 v-html 不会编译那个 html。但是你们能告诉我如何从javascript调用组件方法（即在组件范围之外）。这样我就可以使用onclick="JAVASCRIPT_CODE_TO_EXECUTE_METHOD"了。

【问题讨论】：

如何添加html内容？，请把这段代码。谢谢

我用v-for遍历数据，然后用v-html打印html

看这里，v-html只加html不编译。***.com/a/45494778/4921471

@AmarjitSingh 检查我的答案here

【参考方案1】：

不会像official docs 中提到的那样编译该内容：

span 的内容将替换为rawHtml 属性的值，解释为纯 HTML - 数据绑定被忽略。请注意，您不能使用v-html 来编写模板部分，因为Vue 不是基于字符串的模板引擎。相反，组件更适合作为 UI 重用和组合的基本单元。

【参考方案2】：

我最终以 JSON 格式保存组件，而不是加载 html。该组件有一个存储 html 字符串的模板属性。通过这种方式，我能够在数据库中存储和加载组件，并且它可以正常工作。