Vue3 通过h函数（传递了一个组件）创建的虚拟节点，挂载到dom中后，怎么后续修改这个组件的props里面的值(关键词-响应式)

Question

Vue3 通过h函数（传递了一个组件）创建的虚拟节点，挂载到dom中后，怎么后续修改这个组件的props里面的值，让他响应式的渲染。

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7528614
• 你也可以参考下这篇文章：Vue - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次修改配置都需要重新打包的问题）超级详细的解决示例代码
• 除此之外, 这篇博客: vue3父子组件传值，props使用细节中的 一、父组件要给子组件传值时，可以通过props来完成组件的通信 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  // 父组件
  <template>
      // 通过自定义属性的方式给子组件传递数据
  	<message title="父组件中的值"></message>
  </template>
  
  
  
  // 子组件
  <template>
      // 使用父组件传递过来的值
      <h2> {{title}} </h2>
  </template>
  <script>
  	export default {
  		// 通过props 接收父组件传递过来的数据,模板中可以直接使用
  		props: ['title'],
  
  		setup(props, context) {
  			// setup函数中要使用的话，要接收一下
  			console.log(props.title)
          }
  </script>
  

  子组件中props两种常见的用法

  • 方式一：字符串数组，数组中的字符串就是父组件中引用子组件时自定义attribute的名称
  • 方式二：对象类型，我们可以在指定attribute名称的同时，指定它需要传递的类型，是否时必须的，默认值等

  细节一：props中属性可以指定的类型

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

  细节二：props中不同类型的写法

  props: {
  	// 基础类型指定
  	propA: Number,
  	// 指定多个类型
  	propB: [String, Number],
  	// 指定必传类型
  	propC: {
  		type: String,
  		required: true
      },
      // 带有默认值的数字
      propD: {
  		type: Number,
  		default: 100
  	},
  	// 带有默认值的对象
  	propE: {
  		type: Object,
  		// 对象或数组默认值必须从一个工厂函数获取
  		default() {
  			return { mes: 'lihua'}
  		}
  	},
  	// 自定义验证函数
  	propF: {
  		validator(value) {
  			return ['warning', 'success'].includes(value)
  		}
  	},
  	// 具有默认值的函数
  	prorG: {
  		type: Function,
  		default() {
  			return 'default function'
  		}
  	}
  }
  

  细节三：Props的大小写命名
  属性命名不推荐驼峰命名法法，需要用 a-b(短横线分隔命名)

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^