查看“Vue从入门到实战:使用render函数实现帖子列表”的源代码
←
Vue从入门到实战:使用render函数实现帖子列表
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==之前代码== [[Vue从入门到实战:监听子组件事件]] ==使用render函数== ===父组件=== <nowiki> // 父组件 Vue.component('PostList', { data() { return { posts: [ {id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0}, {id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0}, {id: 3, title: '《Vue.js无难事》怎么样', author: '王五', date: '2019-11-11 15:22:03', vote: 0} ] } }, methods: { // 自定义事件vote的事件处理器方法 handleVote(id){ this.posts.map(item => { item.id === id ? {...item, voite: ++item.vote} : item; }) } }, render: function(h){ let postNodes = []; // this.posts.map取代v-for指令,循环遍历posts, // 构造子组件的虚拟节点 this.posts.map(post => { let node = h('PostListItem', { props: { post: post }, on: { vote : () => this.handleVote(post.id) } }); postNodes.push(node); }) return h('div', [ h('ul', [ postNodes ] ) ] ); }, });</nowiki> ===子组件=== <nowiki> // 子组件 Vue.component('PostListItem', { props: { post: Object, default: () => {}, required: true }, render: function(h){ return h('li', [ h('p', [ h('span', // 这是<span>元素的内容 '标题:'+ this.post.title + ' | 发帖人:' + this.post.author + ' | 发帖时间:' + this.post.date + ' | 点赞数:' + this.post.vote ), h('button', { on: { // 点击按钮,向父组件提交自定义事件vote click: () => this.$emit('vote') } }, '赞' ) ] ) ] ); } }); new Vue({ el: '#app' })</nowiki> ===完整代码=== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <post-list></post-list> </div> <script> // 父组件 Vue.component('PostList', { data() { return { posts: [ {id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0}, {id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0}, {id: 3, title: '《Vue.js无难事》怎么样', author: '王五', date: '2019-11-11 15:22:03', vote: 0} ] } }, methods: { // 自定义事件vote的事件处理器方法 handleVote(id){ this.posts.map(item => { item.id === id ? {...item, voite: ++item.vote} : item; }) } }, render: function(h){ let postNodes = []; // this.posts.map取代v-for指令,循环遍历posts, // 构造子组件的虚拟节点 this.posts.map(post => { let node = h('PostListItem', { props: { post: post }, on: { vote : () => this.handleVote(post.id) } }); postNodes.push(node); }) return h('div', [ h('ul', [ postNodes ] ) ] ); }, }); // 子组件 Vue.component('PostListItem', { props: { post: Object, default: () => {}, required: true }, render: function(h){ return h('li', [ h('p', [ h('span', // 这是<span>元素的内容 '标题:'+ this.post.title + ' | 发帖人:' + this.post.author + ' | 发帖时间:' + this.post.date + ' | 点赞数:' + this.post.vote ), h('button', { on: { // 点击按钮,向父组件提交自定义事件vote click: () => this.$emit('vote') } }, '赞' ) ] ) ] ); } }); new Vue({ el: '#app' }) </script> </body> </html></nowiki>
返回至
Vue从入门到实战:使用render函数实现帖子列表
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息