Vue基础语法（四）

目录

一、父组件向子组件通信

1、数组

2、对象

二、子组件向父组件通信

1、自定义方法

2、选择城市

三、父组件访问子组件

1、this.$children

2、this.$refs

四、子组件访问父组件

1、this.$parent

---

一、父组件向子组件通信

1、数组

（1）例一：选择城市，父组件的数据传递给子组件去显示

编写思路：

①通过v-for建立父组件，并绑定click点击事件传参获取城市

②定义一个city变量，存储获取的城市

③通过props:[]，自定义动态绑定名

④同时在父与子关联的cpn标签，进行v-bind动态绑定将父组件的变量city值传递给子组件自定义绑定名，子组件就可以直接通过使用自定义绑定名，直接显示父组件传递的城市

    

        

            
{{item}}
        
        
    
    
    

（2）例二：标题内容

2、对象（建议用这种，更严谨）

（1）例一：选择城市

    

        

            
{{item}}
        
        
    
    
    

（2）例二：标题内容

（3）注意：

①标签内无法正常识别大小写，通过v-bind动态绑定的属性要注意驼峰改成-格式

②传输的数据类型要一致，否则用对象严谨的方法会报错

---

二、子组件向父组件通信

1、自定义方法

（1）格式：this.$emit('自定义方法名',参数1,参数2....)

（2）要求方法名用name-name的形式

2、选择城市

    

        
{{showCity}}
        
    
    
    

---

三、父组件访问子组件

1、this.$children：返回的是数组

（1）方法使用

    

        
        访问子组件
    
    
    

（2）获取具体值

（3）方法缺点举例

①当有多个子组件时，该方法无法访问具体某个子组件的内容

    

        
        
        访问子组件
    
    
    
    

 ​​​​​​​

2、this.$refs：返回的是对象

注意：使用该方法时要与ref属性搭配，且这个方法可以避免什么数组出现的问题

    

        
        
        访问子组件
    
    
    
    

---

四、子组件访问父组件

1、this.$parent：返回的是对象