Vue脚手架以及Vue组件间通信的几种方法

Vue脚手架的搭建

先介绍一下vue脚手架是什么
Vue.js 是一款流行的 JavaScript 框架，用来构建现代的单页面应用程序（SPA）。
Vue CLI （脚手架）是一个官方的工具，用来帮助开发者快速构建 Vue.js 应用程序。运行.vue文件

1. 第一次搭建的 先全局安装 npm install -g @vue/cli
2. 在项目所在目录cmd打开 vue create my-project my-project是你项目的名字
3. 进到安装了脚手架文件的cmd npm run serve 即可出现
   
   在终端输入npm run serve

会直接运行src中的main.js文件
项目结构如下

即可开始写vue项目了

组件间通信

组件自定义事件

组件自定义事件第一种写法 添加到子组件的原型对象身上

通过组件自定义事件由父组件给其绑定自定义事件 传递数据
App.vue
父组件为子组件绑定的bindingThings自定义事件 通过getStudentName让子组件调用父组件的时候传递数据给父组件
父组件通过v-on指令监听这个事件,获取到name值进行后续处理。

<template>
   <div>
    <!-- 通过父组件给子组件绑定了一个自定义事件 实现传递数据 -->
      <Student v-on:bindingThings="getStudentName"/>
      <hr/>
     <School/>
   </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
  name: "App",
  components:{
    School,
    Student,
  },
  methods:{
    getStudentName(name){
      console.log("App收到了子组件的名字",name);
    }
  }
}
</script>

Student.vue

<template>
   <div class="strudent">
     <h2>姓名:{{  name }}</h2>
     <h2>性别: {{ sex }}</h2>
     <button @click="sendName">点我触发事件</button>
   </div>
</template>

<script>
export default {
  name: "StudentName",
  data(){
    console.log(this);
    return {
       name: '张三',
       sex: '男',
    }
  },
  methods:{
    sendName(){
      //触发Student组件实例对象的getStudentName事件
      //由app给它绑定到原型对象身上
      //this 是组件实例对象
      this.$emit("getStudentName",this.name)
    }
  }
}
</script>
<style>
.strudent{
  background-color: rgb(241, 210, 215);
}
</style>

组件自定义事件第二种写法 获取组件实例

父组件

<template>
   <div>
      <!-- 2 父组件用ref获得子组件之后绑定自定义事件 -->
      <Student ref="student"/>
      <hr/>
     <School/>
   </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
  name: "App",
  components:{
    School,
    Student,
  },
  methods:{
    getStudentName(name){
      console.log("App收到了子组件的名字",name);
    }
  },
  mounted(){
    // App挂载完毕 得到子组件 getStudentName呗触发
    this.$refs.student.$on("getStudentName",this.getStudentName)
 //得到子组件 调用函数 传递参数
  }
}
</script>

全局事件组件

相当于创造了一个中转站
往vue的原型对象上面添加一个组件实例对象 因为这样他才有$on $emit等方法 才能是其他组件调用 监听 适用于任意组件间通信。

cr:尚硅谷

1. 创建全局事件总线

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

main.js

//引入Vue
import Vue from "vue";
//引入App
import App from './App';


//关闭Vue的生产提示
Vue.config.productionTip = false;
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        //安装全局事件总线
        //因为是全局的 所以事件不能重名
        Vue.prototype.$bus=this
    },
});

2. 接受数据的组件

mounted(){
    console.log(this);
    this.$bus.$on("hello",(data)=>{
      console.log("school收到了信息",data);
    })
  },
  beforeDestroy(){
    //bus一直在 所以给他解绑 直接销毁组件时候 绑定的自定义事件也会没
    this.$bus.$off("hello")
  }

3. 发送数据的组件

methods:{
    sendSchool(){
      console.log(this);
      this.$bus.$emit("hello","66666")
    }

消息的订阅和发布

需要数据的组件要订阅消息
下载第三方库

在组件引入
import PubSub from ‘pubsub-js’;
得到信息的组件
订阅消息 得到信息的组件
调用unsubscribe方法

mounted(){
    //订阅消息
  this.pubId= PubSub.subscribe("hello",(messagname,data)=>{
      console.log("订阅消息成功",messagname,data);
    })
  },
  beforeDestroy(){
    //取消订阅 需要传订阅的id
    PubSub.unsubscribe(this.pubId)
  }

发布消息
发布消息 传递信息的组件

methods:{
    sendSchool(){
      PubSub.publish("hello",66666)
    }
  }

这周总结 学了vue基础和组件
下周 把学习计划学完之后自己封装一些东西 或者从网上扒一些vue项目学习一下