Java学习路线：搬砖工逆袭Java架构师
简介：Java领域优质创作者、CSDN哪吒公众号作者✌ 、Java架构师奋斗者
扫描主页左侧二维码，加入群聊，一起学习、一起进步
欢迎点赞 收藏 ⭐留言
目录
一、前端代码初体验
1、代码实例
2、浏览器显示
二、根据异常改进
1、监听事件，反向赋值
2、代码实例
3、浏览器显示
三、联动修改num1的值
1、代码实例
2、浏览器显示
四、watch
五、通过$refs完成父访问子
需求分析：
通过输入框，双向绑定文本框显示。
一、前端代码初体验
1、代码实例
Title
2、浏览器显示
Title {{number1}} {{number2}}
2、浏览器显示
错误信息
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number1"
谷歌翻译 -->
避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。 相反，根据道具的值使用数据或计算属性。 道具被变异：“number1”
这时候要完成双向绑定怎么办呢？
红色异常显示，希望在data中定义一个其它属性。
输入框绑定方法：
二、根据异常改进
1、监听事件，反向赋值
2、代码实例
Title
3、浏览器显示
三、联动修改num1的值 1、代码实例
但是，我想通过反向传到父组件中，也就是改变number1的值，也就是改变data中的num1，怎么整？
2、浏览器显示Title props:{{number1}} data:{{dnumber1}} props:{{number2}} data:{{dnumber2}}
四、watch
watch关键是监听某一属性的改变，是上面写法的一种变形写法。
Title props:{{number1}} data:{{dnumber1}} props:{{number2}} data:{{dnumber2}}
五、通过$refs完成父访问子
父子组件通信
在开发中，往往有一些数据需要送上层传递到下层；
比如在一个页面中，我们从服务器请求到很多的数据，其中一部分数据，并非是我们整个页面大组件的，需要在子组件中进行展示，这时，并不会让子组件再次请求一次，而是直接从父组件将数据传递给子组件。
那么如何传递呢？
官方提到：
通过props向子组件传递数据；
通过事件向父组件传递数据；
一般不推荐使用$children，$children一般用于拿到所有组件的时候使用。
Title 我是子组件
Java学习路线：搬砖工逆袭Java架构师
简介：Java领域优质创作者、CSDN哪吒公众号作者✌ 、Java架构师奋斗者
扫描主页左侧二维码，加入群聊，一起学习、一起进步
欢迎点赞 收藏 ⭐留言
往期精彩回顾
【Vue基础知识总结 1】Vue入门
【Vue知识体系总结 2】Vue动态绑定v-bind
【Vue知识体系总结 3】Vue常用标签
【Vue知识体系总结 4】Vue组件化开发
【Vue基础知识总结 5】Vue实现树形结构
【Vue基础知识总结 6】Spring Boot + Vue 全栈开发，都需要哪些前端知识？
