时间戳

首页 > 解决方案 > 在组件中捕获 html

javascript - 在组件中捕获 html

问题描述

捕获一个子组件的内容，这个组件和这个依次调用另一个，在这个第二个组件中有一个html，在这个第二个组件中的代码javascripot捕获这个组件来使用它

第一个组件，作为组件子--字段--

<template>
    <div id="login">
       <field type="select" name="lang">
            <option>one</option>
            <option>zero</option>
        </field>
    </div>
</template>

第二个组成部分，是字段

<template>
    <div class="field input">
        <label>{{label}}</label>
        <div v-html="htmlfield"> </div>
    </div>
</template>
<script>
export default {
    props: ['type'],
    computed : {
            htmlfield : function(){
              switch (this.type) {
                    case 'select':
                        return `<select ${attr}>**__here__**</select>`; break;
              }
            },
    },
}
</script>

__here__我想把第一个组件中指示的选项

我希望能够用 javascript 捕获组件的 html

标签： javascriptvue.js

解决方案

看起来您正在尝试创建一个通用<field>的，您可以传递您想要的输入类型。

我可以建议一种不同的方法吗？

第一个组件

<template>
    <div id="login">
      <field type="select" :options="options" name="lang"></field>
    </div>
</template>
<script>
export default {
  data () {
    return {
      options: [
        { label: 'one', value: 'value1' },
        { label: 'zero', value: 'value2' }
      ]
    }
  }
}
</script>

第二部分：

<template>
      <div class="field input">
        <label>{{ label }}</label>

        <select v-if="type === 'select'">
          <option v-for="option in options" :value="option.value" :key="option.value">{{ option.label }}</option>
        </select>

        <input v-if="type === 'text'" type="text">
        <input v-if="type === 'number'" type="number">
    </div>
</template>
<script>
export default {
  props: ['label', 'type', 'options']
}
</script>

在这里，我们不是在父模板中编写<option>元素，而是在一个名为的数组中创建选项对象options并将其<field>作为道具传递给，然后我们可以<option>在子模板中渲染元素'type' === 'select'。

推荐阅读