vue自定义组件并使用v-model进行绑定,实现父子组件的数据交互+VueMathjax组件公示预览展示的使用

最新推荐文章于 2024-05-10 12:27:58 发布

huangq_qiao

最新推荐文章于 2024-05-10 12:27:58 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/110086856

版权

vue表单数据的双向绑定 v-model原理解析
默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event
如何自定义组件, 并在自定义组件中设置使用v-model
如: 在父组件datasourceUpload中调用子组件mathJaxDescription,并通过v-model双向绑定父组件中填写的表单数据datasource.description

实现目标:
子组件封装一个组件,实现用户输入描述信息并可以通过数学公式的转换预览展示
通过v-mode与父组件进行数据交互

在这里插入图片描述

3. 实现方案
在父组件中通过v-model给子组件绑定表单数据

<FormItem label="描述信息">
	{
   {
   datasource.description}}
	<mathJaxDescription v-model="datasource.description"></mathJaxDescription>
</FormItem>

相当于 :value + @input 方法实现双向 v-model 绑定

<mathJaxDescription

关注