父传子-父组件向子组件传props的方式

• 方式一：props: [propName]
• 方式二：props: {propName: Array} //指定传值类型，类型不对会报错
• 方式三：

props: {
  propName: {
    type: Array,
    default: [2,4,5]
  }
}

父调子方法-通过refs方式

父组件中<child ref="son"></child>,可通过this.$refs.son.sonMethodName()调用子组件的方法

子传父-$emit方式

在子组件中this.$emit("evtTypeName", obj) 在父组件中this.$on("evtTypeName", obj) 或者在引用子组件的时候<child @evtTypeName=function>

VUEX存储全局变量的方式

在store中先定义好变量

prop双向绑定效果的实现

父子组件间的双向绑定： 官方推荐使用一种update:my-prop-name 的模式来替代事件触发 父组件中引用子组件：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            }
        }
    }
</script>

子组件中：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

www.jianshu.com/p/d42c508ea…