Vue render函数
张雪冬前端学习园地 人气:1render函数使用
1.介绍:我们可以使用javascript动态的插件元素模板,不使用template使用js来创建
// child.vue <script> export default { props: { myData: Array }, // render函数:第一个参数是html标签,或者是一个对象,或者是一个函数,第二个参数是元素的相关配置。 render: function (h) { return h('h1', { // class属性 'class': { foo: true, bar: false }, // 组件的props props: { myData: Array }, // style属性 style: { color: 'yellow', fontSize: '24px' }, // DOM属性 domProps: { innerText: '点击我' }, // 正常的html属性 attrs: { id: 'foo' }, // 给元素绑定事件 on: { click: this.handleClick }, key: '1', ref: 'div' }) }, methods: { handleClick () { alert('调用了我') } } } </script> // parent.vue <template> <div> <component :myData="items" :is="currentView" ></component> </div> </template> <script> import child from './child' export default { data () { return { items: [1, 2, 3, 4], currentView: child } }, methods: { } } </script>
// child.vue // 第三个参数可以创建子元素,第三个参数也可以是一个数组 // 在数组中创建元素,如果给父元素设置了innerHTML会把所有的子元素 // 覆盖掉 <script> export default { data () { return { arr: [12,45,67, 12,5] } }, render: function (h) { return h( 'h1', { style: { background: 'green', fontSize: '24px' } }, this.arr.map(item => { return h ('a', { style: { color: 'red', fontSize: '24px' }, }, item) }) ) } } </script>
加载全部内容