vue | 组件通信篇

1. 父组件传递给子组件：

✎  通过props传递：

可以传递的内容：js数据类型，计算属性也可传

只能一层一层的传递，无法隔代

( 子组件不能修改父组件传递过来的值 )

父组件：

<template>
    <div>
        <h1>父页面</h1>
        <br/>
        <!-- <Son></Son>                 不传值情况  -->
        <Son :title="title"></Son>  <!-- 传值情况  -->
    </div>
</template>

<script>
import Son from '@/components/Son'
export default{
    components:{Son},
    data(){
        return{
            title:'我是父页面的内容',
        }
    },
}
</script>

子组件：

<template>
    <div>
        <h2>子页面: {{title}}</h2>
    </div>
</template>


<script>
export default {
    props:['title'],
    // props:{
    //     title:{   
    //         type:String,
    //         default:'子页面默认值',    //不传值情况且定义type类型
    //     }
    // }
}
</script>

展示效果：

   

 2. 子组件传递给父组件：

✎  通过$emit触发自定义事件：

子组件：

<template>
    <div>
        <h2 @click="sonFun">子页面: </h2>
        <br/>
    </div>
</template>

<script>
export default {
    methods:{
        sonFun(){
            this.$emit("getSon","子组件传的")
        }
    }
}
</script>

父组件：

<template>
    <div>
        <h1>父页面</h1>
        <br/>
        <Son @getSon="getSon"></Son>
    </div>
</template>

<script>
import Son from '@/components/Son'
export default{
    components:{Son},
    methods:{
        getSon(e){
            console.log("从子组件传递过来的参数:")
            console.log(e)
        }
    },
}
</script>

展示效果：

✎  ref：

父组件使用子组件时设置ref ：ref="xxx"

父组件通过设置子组件ref来获取数据：this.$refs.xxx

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

（ 该值可以被父组件修改 ）

父组件：

<template>
    <div>
        <h1>父页面</h1>
        <br/>
        <Son ref="son"></Son>  // 用ref自定义名xxx
    </div>
</template>

<script>
import Son from '@/components/Son'
export default{
    components:{Son},
    mounted(){
        console.log(this.$refs.son.name)   // 用$refs.xxx调用
    },
}
</script>

 

3. 跨层级传递：

 ✎  vm.$parent 和 vm.$children
vm.$parent：

直接通过vm实例下的$parent找，多层隔代就要多个$parent

        如：子组件找父组件 用this.$parent.xxx

               孙组件找父组件 用this.$parent.$parent.xxx

         ( 父组件的值可以被修改)

vm.$children：

直接通过vm实例下的$children找，多层隔代就要根据索引

        如：父组件中有a、b组件

               找a组件 用this.$children[0]

               找b组件 用this.$children[1]

<script>
export default {
    data(){
        return{
           title:''
        }
    },
    created(){
        console.log(this)
        this.title = this.$parent.title
    },
}
</script>

✎  provide / inject 

父组件：通过provide来提供变量，后代组件：通过inject来注入变量

只要在父组件的生命周期内，子组件都可以调用

( 必须一起出现使用 )

父组件：

<template>
    <div>
        <h1>父页面</h1>
        <br/>
        <Son></Son>
        <Grandson></Grandson>
    </div>
</template>

<script>
import Son from '@/components/Son'
import Grandson from '@/components/Grandson'
export default{
    components:{Son,Grandson},
    provide(){
        return{
            name:'父组件通过provide传递'
        }
    },
}
</script>

子组件：

<template>
    <div>
        <h2>子页面: {{name}}</h2>
        <br/>
    </div>
</template>

<script>
export default {
    inject:['name']
}
</script>

孙组件：

<template>
    <div>
        <h3>孙页面:{{name}}</h3>
    </div>
</template>

<script>
export default {
    inject:['name']
}
</script>

展示效果：

4. 兄弟组件之间传递：

✎  事件总线event-bus：

新建一个Vue事件bus对象，通过bus.$emit触发事件，bus.$on监听触发的事件。

（通过xxx.js设置一个中转，位置可以随意放，常规放在util工具文件内设置为bus.js）

新建bus.js：

 son组件：

<template>
    <div>
        <h2>Son组件:{{name}} </h2>
        <button @click="btn">传递给Daughter按钮</button>
        <br/>
    </div>
</template>

<script>
import bus from '@/utils/bus'
export default {
    data(){
        return{
            name:"我是Son组件的默认数据"
        }
    },
    methods:{
        btn(){
            console.log("按钮点击：")
            bus.$emit('msg',"Son传给Daughter组件的内容")
        },
    }
}
</script>

Grandson组件：

<template>
    <div>
        <h3>Grandson组件:{{msg}}</h3>
    </div>
</template>

<script>
import bus from '@/utils/bus'
export default {
    data(){
        return{
            msg:''
        }
    },
    mounted(){
        console.log("sss")
        bus.$on('msg',(res)=>{
            this.msg = res;
        })
    },
}
</script>

展示效果：