Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
时间:2019-10-11
本文章向大家介绍Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法,主要包括Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一,子组件数据跟着父组件改变
父组件的代码
1 <template> 2 <div class="home"> 3 <img alt="Vue logo" src="../assets/logo.png"> 4 <!--<HelloWorld msg="Welcome to Your Vue.js App"/>--> 5 父组件的值<input type="text" v-model="parentVal"> 6 <div> 7 <child-test :inputData="parentVal"></child-test> 8 </div> 9 </div> 10 </template> 11 <script> 12 // @ is an alias to /src 13 import HelloWorld from '@/components/HelloWorld.vue' 14 import ChildTest from '@/components/child-test.vue' 15 export default { 16 name: 'home', 17 components: { 18 HelloWorld,ChildTest 19 }, 20 data() { 21 return { 22 parentVal: 100, 23 } 24 }, 25 } 26 </script>
子组件的代码如下:
1 <template> 2 <div class="child"> 3 子组件<input type="text" v-model="childVal"> 4 </div> 5 </template> 6 <script> 7 export default { 8 name: 'child', 9 props: { 10 inputData: { 11 } 12 }, 13 data() { 14 return { 15 childVal: this.inputData 16 } 17 }, 18 watch: { 19 inputData(newVal){ 20 this.childVal = newVal; 21 } 22 } 23 } 24 </script>
总结:父组件通过props传值给子组件,子组件通过watch监听父组件传过来的值改变来重新更新子组件的值。以此来达到子组件的值跟随父组件的值改变。如果不使用watch,虽然父组件传过来的值改变了,但是子组件不会自动更新。
二,父组件数据跟着子组件改变
父组件代码
1 <template> 2 <div class="home"> 3 <img alt="Vue logo" src="../assets/logo.png"> 4 <!--<HelloWorld msg="Welcome to Your Vue.js App"/>--> 5 父组件的值<input type="text" v-model="parentVal"> 6 <div> 7 <child-test @childValInput="childVal" :inputData="parentVal"></child-test> 8 </div> 9 </div> 10 </template> 11 <script> 12 // @ is an alias to /src 13 import HelloWorld from '@/components/HelloWorld.vue' 14 import ChildTest from '@/components/child-test.vue' 15 export default { 16 name: 'home', 17 components: { 18 HelloWorld,ChildTest 19 }, 20 data() { 21 return { 22 parentVal: 100, 23 } 24 }, 25 methods: { 26 childVal(val) { 27 this.parentVal = val; 28 } 29 } 30 } 31 </script
子组件代码
1 <template> 2 <div class="child"> 3 子组件<input type="text" v-model="childVal"> 4 </div> 5 </template> 6 <script> 7 export default { 8 name: 'child', 9 data() { 10 return { 11 childVal: 10 12 } 13 }, 14 watch: { 15 childVal(newVal){ 16 this.$emit('childValInput',this.childVal) 17 } 18 } 19 } 20 </script>
总结:父组件中要@方法来接收子组件传递的emit,使用时要在methods中定义一下来使用。
转载自:https://juejin.im/post/5c71584e6fb9a049d4427063
原文地址:https://www.cnblogs.com/planetwithpig/p/11652798.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Canvas系列(10):动画初级
- Canvas系列(5):绘制文字
- 详解Keepalived安装与配置
- Redis数据结构-字典
- 编程体系结构(07):JavaEE之Web开发
- Centos 6.5环境实现本地局域网搭建YUM的方法【基于HTTP】
- Doug Lea在J.U.C包里面写的BUG又被网友发现了。
- CentOs 7.*中配置安装phpMyAdmin的完整步骤记录
- Linux中怎么通过PID号找到对应的进程名及所在目录方法
- Apache环境下配置多个ssl证书搭建多个站点的方法
- 详解Linux手动释放缓存的方法
- 详解Centos7源码编译安装 php7.2之生产篇
- Centos7利用内存优化磁盘缓存读写速度的方法
- Redis过期策略和数据淘汰机制
- 图片由彩色渐变到黑白动画