这篇文章主要介绍了关于Vue表单类的父子组件数据传递示例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面。
在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明。
与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同。
1、传递基本类型数据
当子组件内容较少时,会直接传递基本类型数据,通常为String, Number, Boolean三种。
先看个例子:
<!-- 父组件 parent.vue --> <template> <p class="parent"> <h3>问卷调查</h3> <child v-model="form.name"></child> <p class=""> <p>姓名:{{form.name}}</p> </p> </p> </template> <script> import child from './child.vue' export default { components: { child }, data () { return { form: { name: '请输入姓名' } } } } </script>
<!-- 子组件 child.vue --> <template> <p class="child"> <label> 姓名:<input type="text" :value="currentValue" @input="changeName"> </label> </p> </template> <script> export default { props: { // 这个 prop 属性必须是 valule,因为 v-model 展开所 v-bind 的就是 value value: '' }, methods: { changeName (e) { // 给input元素的 input 事件绑定一个方法 changeName // 每次执行这个方法的时候都会触发自定义事件 input,并且把输入框的值传递进去。 this.$emit('input', e.target.value) } } } </script>
给子组件的 input 事件绑定一个方法 changeName,每次执行这个方法的时候都会触发自定义事件 input,并且把输入框的值传递进去。
父组件通过 v-model 指令绑定一个值,来接收子组件传递过来的数据。但这样只是父组件响应子组件的数据,如果还要子组件响应父组件传递的数据,就需要给子组件定义一个props属性 value,并且这个属性必须是 value,不能写个其它单词。
v-model 其实就是一个语法糖,详情可以参考使用自定义事件的表单输入组件。
2、传递引用类型数据
当子组件里的内容比较多时,比如子组件有多个表单元素,如果还像上面那样给每个表单元素绑定值,那就要写很多重复代码了。所以这个时候通常传递的是一个对象,传值的基本原理不变,不过写法上会有些不同。
还是先看代码:
<!-- 父组件 parent.vue --> <template> <p class="parent"> <h3>问卷调查</h3> <child :formData.sync="form"></child> <p class=""> <p>姓名:{{form.name}}</p> </p> </p> </template> <script> import child from './child.vue' export default { components: { child }, data () { return { form: { name: '请输入姓名', age: '21' } } } } </script>
<!-- 子组件 child.vue --> <template> <p class="child"> <label> 姓名:<input type="text" v-model="form.name"> </label> <label> 年龄:<input type="text" v-model="form.age"> </label> <label> 地点:<input type="text" v-model="form.address"> </label> </p> </template> <script> export default { data () { return { form: { name: '', age: '', address: '' } } }, props: { // 这个 prop 属性接收父组件传递进来的值 formData: Object }, watch: { // 因为不能直接修改 props 里的属性,所以不能直接把 formData 通过v-model进行绑定 // 在这里我们需要监听 formData,当它发生变化时,立即将值赋给 data 里的 form formData: { immediate: true, handler (val) { this.form = val } } }, mounted () { // props 是单向数据流,通过触发 update 事件绑定 formData, // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象 // 父组件在绑定 formData 的时候,需要加上 .sync this.$emit('update:formData', this.form) } } </script>
props 是单向数据流,当我们需要对 props 内的属性进行双向绑定时,就需要用到.sync 修饰符,详情请参考.sync 修饰符,这里不做赘述。
这里需要注意的是,vue 中是不能直接修改 props 的,所以如果我们要向父组件传值,还是需要通过修改 data 里的值,prop 只是作为父子之间通话的中间人存在。
另外,如果我们想要预览父组件最开始传的数据,就需要通过 watch 监听 prop 的变化,在子组件初始化的时候就把值传进去。
注意: 我在子组件里把 this.$emit('update:formData', this.form) 放在 mounted 当中的,其原因是为了避免在每个 input 标签的 input 事件中触发自定义事件,但这样写的前提是,父子组件都要共用一个对象。
这也就是上面代码中,父组件中使用 :formData.sync="form" 绑定值时,form 是一个对象,而子组件中的触发自定义事件 this.$emit('update:formData', this.form) ,this.form 也得是一个对象。
这里还需要注意的是,如果有多个子组件使用一个对象,那就要避免这种写法,因为一个组件修改了这个对象的数据,那么其它子组件也就都跟着改变了。
所以我在用的时候都是给每个子组件分配了一个自己的对象,比如:
data () { return { parentObject: { child_1_obj: {}, child_2_obj: {}, } } }
这是在父组件里定义的数据,当然名字不会这样取了。
结尾
也没什么说的了,对 Vue 还是处于使用的阶段,对其底层的东西了解还不够,我也好想读读源码,但总只是想想.....大家觉得有什么不妥的地方尽管说,大家相互交流交流。
相关推荐:
以上是Vue表单类的父子组件数据传递示例的详细内容。更多信息请关注PHP中文网其他相关文章!

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版
好用的JavaScript开发工具