【Vue】基础 必须掌握（下）

目录

组件使用

① 组件的本质

② 脚手架写组件

③ 组件通信

---

组件使用

① 组件的本质

组件的本质就是名为VueComponent构造函数，是由Vue.extend生成的。每次调用Vue.extend，都会返回一个新的VueComponent。

② 脚手架写组件

注意：命名规范，组件名要求multi-word，如HelloWorld、FatherExample

//main.js
import Vue from 'Vue'
import App from './App.vue'
...
new Vue({
...
    render:h=>h(App);
})

 render:function(createElement){ return createElement(  ) }

上例中，引入的Vue无法解析template，下面的例子可以。

//main.js
import Vue from 'vue/dist/vue'
import App from './App.vue'
...
new Vue({
...
    template:`<App></App>`,
    components:{App}
})

③ 组件通信

父组件给子组件传数据：用props属性直接传数据；

子给父传数据：父给子传方法，子触发事件，父组件通过事件的回调获得数据。这里可以用子接收props，也可以用组件的自定义事件 子使用$emit触发。

举例说明两种方法：

//父组件

<template>
    <div>
        <SonTest :age="age" :getSexget="getSex"></SonTest>       
        <span>性别是：{{sex}}</span>
    </div>
</template>

<script>
import SonTest from './SonTest.vue';

export default {
    name:'FatherTest',
    components:{ SonTest},
    data(){
        return {
            age:18,
            sex:''
        }
    },
    methods:{
        getSex(value){
            console.log(this);
            this.sex=value;
        }
    }

}
</script>

//子组件 

<template>
    <div>
        <div>父传子，props的应用：{{age}}</div>
        <button @click="getget">点击给父传数据</button>
    </div>
</template>

<script>
export default {
    name:'SonTest',
    props:['age','getSexget'],
    data(){
        return{
            sex:'man'
        }
    },
    methods:{
        getget(){
            this.getSexget(this.sex);     
        }
    }
}

 点击按钮前，sex为空，点击按钮后触发事件，引起父组件的回调，父组件收到子组件传的数据

   

 //父组件（其他内容与上面相同），通过组件的自定义事件实现子组件给父组件传数据

<template>
    <div>
        <SonTest :age="age" @getSexget="getSex"></SonTest>       
    </div>
</template>

//子组件

<template>
    <div>
        <div>父传子，props的应用：{{age}}</div>
        <button @click="getget">点击给父传</button>
    </div>  
</template>

<script>
export default {
    name:'SonTest',
    props:['age'],
    data(){
        return{
            sex:'man'
        }
    },
    methods:{
        getget(){
            this.$emit('getSexget',this.sex);     
        }
    }
}
</script>

任意组件间通信：全局事件总线$bus；消息订阅与发布。

全局事件总线$bus基本用法：

//main.js
new Vue({
    ...
    beforeCreate(){
    //安装全局事件总线，$bus就是当前应用的Vue实例
        Vue.prototype.$bus=this;
    }
}

//收数据的组件
methods:{
    demo(value){...}
}
mounted(){
    this.$bus.$on('a',this.demo);
}
beforeDestroy(){//最好要有这个
    this.$bus.$off('a');
}

//发数据的组件
methods:{
    b(){
        this.$bus.$emit('a',数据);
    }
}

消息订阅与发布基本使用：

使用pubsub之前得安装这个插件，npm i pubsub-js

//订阅的组件（收）
import pubsub from 'pubsub-js'
methods:{
    demo(value){}
}
mounted(){
    this.x = pubsub.subscribe('a',(messageName,value)={ this.demo(value) });
}
beforeDestroy(){
    this.x.pubsub.unsubscribe('a');
}

//发布的组件（发）
import pubsub from 'pubsub-js'
methods:{
    b(){
        pubsub.publish('a',value)
    }
}