Vue组件传参

父组件传子组件

props接受由父组件传向子组件的参数

例如:

父组件:

<CloseSelf :visible="showA" @update:visible="showA=$event">

            <div class="CloseSpan"></div>

        </CloseSelf>

子组件:

 props: {

        visible: {

            type: Boolean,

            default: true

        }

    }

子组件传父组件

父组件:

<CloseSelf :visible="showA" @update:visible="showA=$event">

            <div class="CloseSpan"></div>

        </CloseSelf>

子组件:

<div class="close" @click="$emit( 'update:visible' ,false)">&times;</div>

上面是常用的

:visible="showA" @update:visible="showA=$event"  

:visible.sync="showA"(语法糖)

进阶

引用父组件

$parent

父组件:

data() {

    return {

      outNum: 5

    }

  },

子组件:

<p @click="$parent.outNum++" :style="{backgroundColor:myColor}">

访问父组件中的outNum：{{$parent.outNum}}</p>

引用子组件

$children

父组件:

<button @click="$children[0].myColor='#ff0000'">红</button>

子组件:

data() {

        return {

            myColor: "#f30",

            myMsg: '',

        }

    },

$refs

父组件:

 <NavCom ref="mynav" :right_text="'分享'" bg_color="#f0f0f0"></NavCom>

 <button @click="$refs.mynav.myColor='blue'">蓝</button>

子组件:

data() {

        return {

            myColor: "#f30",

            myMsg: '',

        }

    },

引用根组件($root 根组件 最大组件)

$root 根组件 最大组件

事件bus传参

（跨层级访问数据）
（非父子关系）

1. 创建bus.js

import Vue from 'vue'
var bus  = new Vue();
export default bus;

2. 在要发送数据的组件中导入bus并使用 bus.$emit

data() {

        return {

            msg: "来自app"

        }

    },

mounted() {

bus.$emit("msgchange", this.msg)

}

3. 在有接收数据的组件中导入bus 并使用 bus.$on  (注意this一般用箭头函数避免问题)

 bus.$on("msgchange", $event => {

            console.log("msgchange", $event);

            this.myMsg = $event;

        })

注意：任意组件只要导入bus 就可以随意的 发送与监听数据

bus.$on(eventname,callback) 监听事件
bus.$emit(eventname,data)发送事件
bus.$off(eventname)移除事件

provider和inject

依赖注入
跨层级访问(只读)
1.provide提供数据
所有子孙都可以通过inject注入数据

provide: {

        a: "听说明天解封"

    },

2.inject 接收父辈组件提供的数据

 inject: ['a'],