Vue组件传值

组件传值

 一、基本的组件传值

1、父子组件(是两个组件同时都在页面上展示着（都在内存中）)

```js

//父子组件的代码格式（标签的嵌套）

父组件模板里面有子组件使用

     <Son></Son>

```

1）、父给子

​      props，vuex

```js

子组件

<template>

     ....

<template>

<script>

    export default{

        props:['name'],//子组件的属性

   }

</script>

//父组件

 

<template>

     <Son name="sss" ></Son>

<template>

<script>

    export default{

 

}

</script>

```

 

2）、子给父

触发事件： this.$emit(); 

vuex

```js

子组件

<template>

     <div ></div>

<template>

<script>

    export default{

    

    updated(){

        this.$emit("myClick","hello,我是儿子");//触发子组件的自定义事件，调用父组件的函数，传参

     }    

  }

</script>

//父组件

<template>

     <input type="button" v-on:click="fn" />

     <Son v-on:myClick="fn" ></Son>

<template>

<script>

    export default{

        

        methods:{

            fn(str){

                

            }

        }

    }

</script>

```

 

### 2、兄弟组件(是两个组件同时都在页面上展示着（都在内存中）)

```js

//父组件的模板里：

<Son1></Son1>

<Son2></Son2>

```

使用：事件总线，vuex，共同的父亲

 

**事件总线**

思路：

​       使用一个空的vue对象，借助vue对象的$on和$emit。空的vue对象就相当于一个全局对象

代码格式：

```js

//1、创建一个空的vue对象

./utils/vuebus.js

export default new Vue();

//假定Son1给Son2传

//2、在Son2里绑定事件（给事件名绑定一个函数）

<template>

     

<template>

<script>

    import vuebus from "./utils/vuebus"

    export default{

         created(){

             vuebus.$on("myClick",(str)=>{

                 console.log(str);

             });

         }

    }

</script>

//3、在Son1触发Son2里绑定的事件（触发事件，并调用函数）

<template>

     <input type="button" value="传" @click="fn" />

<template>

<script>

    import vuebus from "./utils/vuebus"

    export default{

         methods:{

             fn(){

                 vuebus.$emit("myClick","hi，我是你兄弟"); //触发事件，就是在调函数

             }

         }

    }

</script>

```

 

### 3、无关组件（有可能不是同时都在内存中）

vuex，路由

当两个组件不是同时都在内存中存在的话，那么就需要借助于另外 一个对象（如：vuex，vue-router）