今天的码农女孩做了关于vue组件的笔记和简答题

组件
组件是程序员自己创建的标签，为了让代码可以重复利用，减少代码和选择器的定义，在调用组件时，数据发生改变，不会影响其他组件。
注册组件
<List :aa="str">aaaaaa</List>
components:{//注册组件
 "List":{//自定义组件名
    //被映射成的标签
    template:"<h1 @click='fun'><a href='#'>{{aa}}</a></h1>"
   }
},
子组件与父组件传值
父组件传给子组件：
父组件通过自定义属性拿到vue下的变量，子组件通过props接收父组件的属性值
  <List :aa="str">aaaaaa</List>
   data:{
                str:"hello",
            },
   components:{//注册组件
                "List":{//定义的组件名称
                    props:["aa"],//接收组件里的属性名
                     //通过插值表达式输出到标签里
                    template:"<h1 @click='fun'><a href='#'>{{aa}}</a></h1>", 
                }
            },
子组件传给父组件：
子类通过事件调用函数，在函数下通过$emit关键字调用父类事件的函数体
<List @ww="fun1">aaaaaa</List>
        components:{//注册组件
                "List":{
                    props:["aa"],
                    template:"<h1 @click='fun'><a href='#'>{{aa}}</a></h1>", 
                    methods:{
                        fun:function(){
                            //$emit传给父组件的函数里
                            this.$emit("ww",this.aa+"fghj")
                        }
                    }
                }
            },
        methods:{
                fun1:function(v){
                    console.log(v)//通过函数的参数直接拿到值
                }
            }

通信事件
$emit(自定义事件名称，参数)触发自定义事件
$on(事件名称，函数）监听事件
mouted:function(){
     this.$on("ww",function(v){
            console.log("ww函数被执行了,监听到了,参数为:"+v)
       })
 }

简答题：

父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数

非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

vue的兄弟组件传值

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。