在 vue.js 组件中渲染子组件

Posted 2023-02-23

【中文标题】在 vue.js 组件中渲染子组件

【英文标题】：Render children in vue.js Components

【发布时间】：2016-12-21 23:31:30

【问题描述】：

如何在 vue.js 中选择选项。 React 有类似this.props.children 的东西，我用它来处理这种情况。如何在 vue.js 中解决这个问题？

我也尝试使用 $children 访问孩子，但它始终是一个空数组。

在此示例中，选择框没有选项。 在 jsFiddle 上也添加了示例：https://jsfiddle.net/kt8urx7d/

var FormComp = Vue.extend(
    template: '#form-comp'
);
Vue.component('form-comp', FormComp);

var SelectField = Vue.extend(
    template: '#select-field'
);
Vue.component('select-field', SelectField);

var SelectFieldOption = Vue.extend(
    template: '#select-field-option'
);
Vue.component('select-field-option', SelectFieldOption);


new Vue(
  el: '#container',
  template: '<form-comp></form-comp>'
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<script type="x/template" id="form-comp">
	<form>
  	<h1>This is my Form</h1>
  	<select-field name="my-select-field">
    	<select-field-option value="my-value-1">My Text 1</select-field-option>
      <select-field-option value="my-value-2">My Text 2</select-field-option>
    </select-field>
  </form>
</script>

<script type="x/template" id="select-field">
	<select name=" name ">
  	<!-- include children: select-field-option -->
  </select>
</script>

<script type="x/template" id="select-field-option">
	<option value=" value "> content </option>
</script>

<div id="container"></div>

【问题讨论】：

能否请您附上脚本？

我已经添加了脚本

嗯，这仍然不完整，我们缺少组件的模板。我最好的猜测是模板是错误的。例如，FormComp 组件的标签在哪里（例如<form-comp>）。你读过文档吗？请尝试在jsfiddle 上写下您的想法，我们或许可以为您提供更好的帮助。

我创建了以下 jsfiddle：jsfiddle.net/kt8urx7d 如何将选项放入选择框？

【参考方案1】：

在组件模板中呈现元素的方式存在一些问题。看看这个：https://vuejs.org/guide/components.html#Content-Distribution-with-Slots

另一方面，Vue 使用浏览器的HTML 渲染系统，这意味着“应该”在 HTML 元素中的元素会被丢弃。例如，Vue 期望在 select 内出现 option，而不是 select-field-option。要克服此限制，您可以这样做：

<option is="select-field-option" value="lalala"></option>

重新考虑您在组件内使用模板的方式。这可能有助于抢先一步：https://jsfiddle.net/kt8urx7d/5/

【讨论】：

我尝试了插槽功能。但我仍然不知道为什么 is 没有呈现我的选项：jsfiddle.net/n0osk4om :-(

这有点令人沮丧。它适用于 some-text 组件，但不适用于 select.. ：jsfiddle.net/n0osk4om/2

别担心，它最终会发生。现在我不在电脑前，但我可以在 2-3 小时后查看。

您遇到了与我们之前提到的相同的问题。从我原来的回答：“另一方面，Vue 使用浏览器的 HTML 渲染系统，这意味着“应该”在 HTML 元素内的元素被丢弃。例如，Vue 期望在 select 中选择选项，而不是选择-字段选项。”这意味着您不能在select 元素内使用<slot></slot>，因为浏览器中的HTML 解析器在呈现它之前会丢弃该元素。请看一下我的回答，我建议将select-field-option 移到select-field 组件下方。

嗯，好的。所以他们没有办法创建一个可以做到这一点的组件：gist.github.com/tiefenb/b2622bb275cbd23ef040cd219c891686 太糟糕了..