render()，$emit()，还是不会啊。怎么debug？

最新推荐文章于 2023-10-13 10:57:55 发布

hamimelon2020

最新推荐文章于 2023-10-13 10:57:55 发布

阅读量339

点赞数

分类专栏： vue JavaScript 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/119804382

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

本文通过一个实例展示了Vue.js中父子组件的交互，包括数据传递和事件处理。使用`Vue.createApp`创建应用，定义了`PostList`父组件和`PostListItem`子组件。父组件维护了一个帖子列表，并通过自定义事件`vote`实现子组件的投票功能。虽然子组件的投票操作未直接修改数据，导致非响应式，但父组件的更新是响应式的。整个过程揭示了Vue.js组件的渲染机制和数据流管理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="app">
			<post-list></post-list>
		</div>
	
	    <script src="https://unpkg.com/vue@next"></script>
		<script>
		    const app = Vue.createApp({})
			// 父组件
			app.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: '《Java无难事》怎么样', author: '王五', date: '2020-11-11 15:22:03', vote: 0}
      					]
      				}
      			},
      			methods: {
      				// 自定义事件vote的事件处理器方法
      				handleVote(id){
      					this.posts.map(item => {
      						item.id === id ? {...item, voite: ++item.vote} : item;
      					})
      				}
      			},
      			render(){
      				let postNodes = [];
      				// this.posts.map取代v-for指令，循环遍历posts，
      				// 构造子组件的虚拟节点
      				this.posts.map(post => {
      					let node = Vue.h(Vue.resolveComponent('PostListItem'), {
    								post: post,
    								onVote: () => this.handleVote(post.id)
    							});
      					postNodes.push(node);
      				})
      				return Vue.h('div', [
      						Vue.h('ul',	[
      								postNodes
      							]
      						)
      					]
      				);
      			},
      		});
  		
  		    // 子组件
			app.component('PostListItem', {
				props: {
					post: {
					    type: Object,
					    required: true
					}
				},
				render(){
					return Vue.h('li', [
							Vue.h('p', [
									Vue.h('span',
										// 这是<span>元素的内容
										'标题：'+ this.post.title + ' | 发帖人：' + this.post.author + ' | 发帖时间：' + this.post.date + ' | 点赞数：' + this.post.vote
									),
									Vue.h('button', {
									    onClick: () => this.$emit('vote')
		
										},'赞')
								]
							)
						]
					);
				}
  		    });
  		
			app.mount('#app')
		</script>
	</body>
</html>