父组件、子组件直接的访问方式:
1、父组件访问子组件可以用$childern 或者$refs
$childern 的用法:
![d07d5a98e5d75ef9a4139f4899cad987.png](https://i-blog.csdnimg.cn/blog_migrate/34802b97ea2d3a31a04cefd5ae2fd08e.jpeg)
当父组件引用多个子组件的时候,就会生成多个对应的对象:
![3e9171ce41ddd77b779e7f6cd938882e.png](https://i-blog.csdnimg.cn/blog_migrate/4b71abb71d86fac9aa8e8a9dfc98ecb5.jpeg)
$childern可以访问子组件中的方法、data等数据
![835f2ba61c7716ebe6aa4be0acb29972.png](https://i-blog.csdnimg.cn/blog_migrate/ca7f544d881335c8db7309219af77641.jpeg)
但$childern一般在开发中比较少用,用$refs比较常用,因为$refs是可以通过key来绝对定位到对应的子组件,这种方法在实际开发中比较常用。$refs是一个对象类型,默认是一个空对象,在引用的时候通过ref = key 值来生成一个实例对象:
![71cd3d29678bd5fe2beabc4254a152b3.png](https://i-blog.csdnimg.cn/blog_migrate/28fe839162d14aa890780c950818ed6a.jpeg)
2、子组件访问父组件用$parent
![367e2183093d76c786a09327ddf8745a.png](https://i-blog.csdnimg.cn/blog_migrate/559441f336fdda331749c6ab55af9da8.jpeg)
但是在实际开发是不会这样使用的,因为如果这样嵌套组件的话,里面的子组件就不够独立了,导致子组件的复用性不强,与父组件的耦合度高。
如果需要访问跟组件里面的方法或数据,则可以用$root进行访问:
![23ff98f06f3a669704594ae18000e63c.png](https://i-blog.csdnimg.cn/blog_migrate/282694ccb4185a83e8de987c0f92eda1.jpeg)
经典小案例:
0、 功能需求:通过组件,有两个数据输入,由子组件输入的数字,改变父组件的数字,反之亦然,并且两个数字成倍数相互影响。
1、在我们实现这个需求的时候,我们第一想到的就是通过v-model进行输入框与data数据的绑定,由于子组件只能访问自己的数据,所以我们一开始想到的最简单的办法是:
![544c824b28f041f76793130bac213507.png](https://i-blog.csdnimg.cn/blog_migrate/90e9abdaeb6c539ff4da0567725ce36a.jpeg)
但是这样编译器会反馈一个错误信息给我们:
![da2f764aa0df8877f6f246c130bebd73.png](https://i-blog.csdnimg.cn/blog_migrate/3048da0ad80a2400b1192a26fc80e2c2.jpeg)
大概的意思是:避免直接修改prop里的值,应该要通过父组件进行值的修改。代替方案:通过修改子组件的Data函数进行值修改,或者通过计算的方法,替代方案如下:
![4cecee8f06668355091ff5610633e476.png](https://i-blog.csdnimg.cn/blog_migrate/1000712b2055f4b48b294a61a2188c95.jpeg)
此时不再报错,但是我们发现当改变输入框的值时,props里面的值时没有发生变化的。原因是Input输入框里面绑定的是data()函数中的字段。所以要改变子组件里面的数据,需要通过data函数或计算方法进行修改,不要直接绑定props里面的字段!但是展示是可以直接用props里面的字段。
2、为了实现修改props里面数据,我们将v-modle进行拆分:v-bind、v-on进行处理:
![aaf43cbd7754ac9a49c5ac0b1c0c5882.png](https://i-blog.csdnimg.cn/blog_migrate/cba0f5ab25df9f1d388b5e211fb77e12.jpeg)
子组件:
![513b92fe28baa5c08f89b6a340348b8e.png](https://i-blog.csdnimg.cn/blog_migrate/ba1a3c38d0c439eace543bb2dd9c69be.jpeg)
父组件:
![65b8d6c4da303dd2c99c524dce74c0f1.png](https://i-blog.csdnimg.cn/blog_migrate/de96238e4b059e0c08a8f04b07b09bdf.jpeg)
3、第一个数字是第二个数字的倍数关系,而且改变任何一个值,就会影响另外一个值
为了实现此功能,在num1Input(event)事件中进一步修改另外一个数字的值:
![8454fc298f2019ee2330bc0175c1cedc.png](https://i-blog.csdnimg.cn/blog_migrate/7332b409a497d2b9401fa30ecb97f4ed.jpeg)
改变data1的值,相应的data2的值也跟着变化:
![8c35d5971126e407f4bbcbe273bc76eb.png](https://i-blog.csdnimg.cn/blog_migrate/a3819f8debd1db23cdd5556263cb1193.jpeg)
改变data2的值,相应的data1的值也跟着变化:
![08466b3ad0e1dde3ab5c0e45a3bcf507.png](https://i-blog.csdnimg.cn/blog_migrate/0f476911687a69243c97f196f64572f3.jpeg)
4、完整代码如下:
Title
props1: {{number1}}
data1: {{dnumber1}}
props2: {{number2}}
data2: {{dnumber2}}