在vue.js组件中渲染子项

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/