Question

如何在vue.js中选择select。 React有类似this.props.children的东西，我用过这种情况。我怎样才能在vue.js中解决这个问题？

我还尝试使用$ children访问子节点，但它总是一个空数组。

在此示例中，selectbox没有选项。在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>

Answer 1

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

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

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

重新考虑使用组件内部模板的方式。这对于headstart来说非常有用：https://jsfiddle.net/kt8urx7d/5/

在vue.js组件中渲染子项

1 个答案: