vue组件（持续更新中....）

欢迎加我技术交流QQ群 ：811956471

前言：组件是vue里面非常核心的东西，需要深入去了解和使用，该文章将不断更新、总结、归纳有关vue组件方面的知识点。以下梳理内容全部针对于 cli脚手架去整理，个人不喜欢用cdn方式去用vue框架。组件化是现在前端框架中一个非常重要的思想元素，将页面内容进行拆分之后，可独立维护，可复用性大大提高。

一、父组件向子组件传值（使用者向被使用者传值）

//在子组件中：
<template>
    <div id="TopBar">
        <van-nav-bar :title="title_msg"  />
    </div>
</template>
//接收
props:{
    title_msg:{
        type:String,
    default:"项目名称"
    }
 },
//在父组件中：===========================================================================
<template>
    <div id="app">
       <TopBar title_msg="新闻"></TopBar>
    </div>
</template>

二、子组件向父组件传值（被使用者向使用者传值）

这里介绍的方法是：在子组件定义一个自定义事件，进行传递。

//在子组件中：
<template>
    <div id="TopBar">
        <van-nav-bar :title="title_msg" />
        <button @click="val_to_parent">向父组件传值</button>
    </div>
</template>
//此处不要用箭头函数
methods: {
        val_to_parent: function() {
        this.$emit("val", "我是来自子组件的传值")
        }
    }
//在父组件中=============================================
<template>
    <div id="app">
        <TopBar :title_msg="title" @val="receive_val"></TopBar>
    </div>
</template>
methods:{
    receive_val:(val)=>console.log(val)
}

三、子组件调用父组件方法（访问子组件实例或子元素）

eg:

//父组件
<template>
    <base-alert ref="baseAlert"></base-alert>
    <div @click="clickMe">click me</div>
</template>

<script>
import BaseAlert from '@/components/BaseAlert'

export default {
    components: {
        BaseAlert
    },
    methods: {
        clickMe () {
          //popUp 方法在子组件中定义
          this.$refs.baseAlert.popUp()
        }
    }
}
</script>

//子组件
<template>
  <div>
    <div>child component</div>
  </div>
</template>
<script>
export default {
  data () {
    return { }
  },
  methods: {
    popUp () {
      alert(11)
    }
  }
}
</script>

popUp 是函数的名字：里面可以传递参数哦

 this.$refs.baseAlert.popUp(666)
 popUp(val) {
    console.log(vla)//666
  }

四、兄弟组件之间传值方法：eventBus

eventBus单独的事件中心,用来管理组件之间的通信，可以使用on, $off 分别来分发、监听、取消监听事件

eg:

加入在个人中心组建--My里面有两个兄弟组建：BrotherA和BrotherB

步骤一：在assets中新建bus.js文件,代码如下：

//assets 中bus.js
//bus.js
//创建一个空的vue实例 并导出
import vue from 'vue';
export default new vue();

步骤二：
在My组件中：

<template>
    <div id="My">
        <brother-a></brother-a>
        <hr>
        <brother-b></brother-b>
    </div>
</template>
<script>
    //引入兄弟组件
import BrotherA from './BrotherA'
import BrotherB from './BrotherB'
    export default {
        name: 'My',
        data() {
            return {}       
        },
        //局部注册
        components:{
                  BrotherA,
                 BrotherB
              }
    }
</script>
<style scoped="scoped">
</style>

步骤三：在BrotherA和BrotherB：

<template>
    <div id="BrotherA">
        BrotherA：
        <label>
            <div>选择checkbox，可以触发组件BrotherB的监听事件</div>
            <input type="checkbox" v-model="isChecked" @change="handleCheckbox" >
        </label>
    </div>
</template>
<script>
    import bus from '@/assets/bus.js';

    export default {
        name: 'BrotherA',
        data() {
            return {
                msg: '',
                isChecked: true
            }
        },
        methods: {
            handleCheckbox() {
                //分发'getCheckboxStatus'事件
                bus.$emit('getCheckboxStatus', this.isChecked);
            }
        }
    }
</script>

<style scoped="scoped">

</style>


//=============================================================================


<template>
    <div id="BrotherB">
        组件BrotherB：
        <p>
            这里可以得到组件BrotherA的checkbox的值：{{isChecked}}
            <button @click="off">取消监听</button>
        </p>
    </div>
</template>
<script>
    import bus from '@/assets/bus.js';
    export default {
        name: 'BrotherB',
        data() {
            return {
                isChecked: ""
            }
        },
        created() {
            this.getCheckboxStatus();
        },
        methods: {
            getCheckboxStatus() {
                //监听'getCheckboxStatus'事件
                bus.$on('getCheckboxStatus', res => {
                    //监听到BusB组件的checkbox的状态 do something...
                    this.isChecked = res;
                })
            },
            //取消监听'getCheckboxStatus'事件
            off:function(){
                bus.$off('getCheckboxStatus');
            }
        },
    }
</script>

<style scoped="scoped">

</style>