Vuejs2 如何使用最初加载的Vue js组件的内容，然后将其绑定到变量

我们希望从html中获取内容（例如使用a），但稍后（装载后）希望将其绑定到变量，就像使用v-html一样

换句话说，我们希望在初始化时，当内容出现在插槽中时加载它们，然后整个内容由绑定变量（如v-html）控制（因为它将是html内容）

如何做到这一点？无需遵循任何丑陋的解决方案，例如需要在v-html属性中传递整个初始html内容

你可以这样试试

<template>
  <custom-component>
    <div v-if="html_variable" v-html="html_variable"></div>
    <template v-else>
     <!-- default content here -->
    </template>
  </custom-component>
</template>

<script>
export default
{
  data()
  {
    return {html_variable: null};
  }
}
</script>

导出默认值
{
数据（）
{
返回{html_变量：null}；
}
}

如何使用

v-html

是丑陋的？无论如何，只需使用一个不可见的元素来定义初始html。a

可能是一个不错的选择

定义一个应保存HTML初始值的数据项：

data () {
   return {
       dHTML: '',
   }
},

在
created（）

created() {
    this.dHTML = this.$refs.initHTML.innerHTML;
},

现在您可以拥有一个漂亮的
v-html=“dHTML”