第3章 *组件交互 -父访问子-脚手架方式(2掌握)

相关工程:web-vue
参考：
https://blog.csdn.net/xqhys/article/details/89494155
https://blog.csdn.net/weixin_33813128/article/details/94177294
类似方法调用或属性访问

目标

• 父组件给子组件传参数props（子组件获取父组件数据 主要用于传输数据 单向）
• 通过 $refs获取子组件数据和调用子组件方法（主要用来调用子组件里的方法）
• 通过refs类似不常用，了解)

data() 的data:区别

https://blog.csdn.net/admin123404/article/details/100535352

原因：不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

第一种方式 父组件给子组件传参数props

类似父类调用子类的构造方法,子类用props名字的数组，定义参数情况

setp 1开发子组件

step2 开发父组件

配置路由router/index.js

import props from '@/components/props/parent'

{
    path: '/props',
    name: 'props',
    component: props
}

测试

http://localhost:8080/#/props

动态prop（父组件给子组件传递的值来源于用户输入）

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

改造父组件

测试

http://localhost:8080/#/props

动态绑定多个值，用多个v-bind

给组件传一组值-传json对象

子组件

父组件

路由index.js

    import  parentjson from '@/components/props/parentjson'

    {
    path: '/parentjson',
    name: 'parentjson',
    component: parentjson
    }

测试

http://localhost:8080/#/parentjson

以下这个做为作业：

有时我们给组件传参数不是传一个对象，而是多个对象，这时我们需要把值包装成数组，用以下方法

子组件

父组件

也可以这么写

路由和测试学生自行完成

二、 通过refs调用子组件里的属性和方法

与$children功能相同,不同点是给每个子组件命了个名字，通过名字而不是通过索引来访问。
他虽然也可以直接访问子组件的数据，但这不是他的强项，所以他主要用来调用子类的方法。

（refs访问到）

image.png

接下来我们写两个子组件，并且在每个子组件里各定义一个方法

调用子组件的方法（重点）

子组件1

子组件2

父组件

路由和测试

       import  refparent from '@/components/refs/parent'

      {
    path: '/refparent',
    name: 'refparent',
    component: refparent
         }


http://localhost:8080/#/refparent

获取子组件的属性

    
    
        
            
            
            
        
        
            

                
                    显示两个组件的信息
                
                
                
            
            
            
            
        
    

三、 通过 $children 获取子组件数据或调用子组件方法（了解略）

    
    
        
            
            
            
        
        
        

            
                显示两个组件的信息