Vue（8）

<template>
  <div id="app">
    <!-- -------自定义事件---------- -->
    <!-- native修饰符，当添加native时默认原生事件，否则是自定义事件 -->
    <MyDay03 @wq="sum" @click.native="func3" ref="demo"/>
    <h1>{{ dataName }}</h1>
  </div>
</template>

<script>
import MyDay03 from './components/day03.vue'



export default {
  name: 'App',
  data () {
    return{
      dataName:"",
    }
  },
  components: {
    MyDay03,
  },
  methods:{
    // 自定义第一种方式使用
    sum(a,b){
      console.log(a);
      console.log(b);
    },
    // 自定义第二种方式使用
    func2(a){
      console.log(a);
    },
    // 测试原生事件
    func4(a){
      this.dataName = a;
    }
    // 测试ref
    // fun(val){
    //   this.name = val
    // }
    // func1(){
    //   // 绑定元素时,获取Dom元素
    //   console.log(this.$refs);
    //   // console.log(this.$refs.newRef.style.color);
    //   // 绑定组件时，获取vc
    //   console.log(this.$refs.schoolRef.msg);
    // }
  },
  mounted() {
    // 自定义第二种方式使用，配置在methods
    this.$refs.demo.$on("ljp",this.func2);
    this.$refs.demo.$once("zth",this.func4)
    // 配置在生命周期中，需要使用箭头函数，箭头函数this指向指向自身的vc
    this.$refs.demo.$on("zm",(a)=>{
      console.log(a);
    })
  },
}
</script>

全局事件总线要让所有的组件都可以看的到 $emit $on

<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click="send">点击</button>
    <!-- <button @click="offs">解绑</button> -->
  </div>
</template>

<script>
export default {
    name:"MyStutend",
    data() {
      return {
        name:'李四'
      }
    },
    methods:{
      // 测试$emit
       send(){
      //   // 触发 就要使用$emit
         this.$emit('w',this.name)
       }
      // ref 配合 $emit
      send(){
      //   // 触发 就要使用$emit
        this.$bus.$emit('l',this.name)
      },
      offs(){
        // 解绑单个
        // this.$bus.$off('hjj')
        // 解绑多个
        // this.$bus.$off(['hjj','ljp']
        // 解绑全部
        // this.$bus.$off()
      }
    }
    // 对象 数组
     props:['name']// 张三 
     props:{
       name:{
         type:Number,
         default:1
       }
     }
    
    // ..............
    // $emit 配合ref 自定义事件 全局事件总线 
    // vc vm
    // vc.原型对象.对象原型 === vm.原型对象
    // mounted(){
    //   console.log(this);
    // }
}
</script>

this.$bus只用于兄弟通信，隔代通信
消息发布只用于兄弟通信，隔代通信 (不常用)

keep-alive	用于缓存组件 从本地读取缓存，优化性能
activeed	组件激活时
deactived	组件失活时

<template>
    <div>
    <keep-alive>

            <vue06s v-if="show"></vue06s>
            <vue06ss v-else></vue06ss>
            <!-- 一般会使用路由组件 -->
    </keep-alive>
    <button @click="jia">点击切换</button>
    </div> 
</template>

<script>
import vue06s from './day06s.vue'
import vue06ss from './day06ss.vue'
export default {
    name:'MyDay6',
    data(){
        return{
        show:true,
        }
    },
    methods:{
        jia(){
            this.show=!this.show;
            console.log(111);
            // 类似于setTimeout的执行流程，
            // 区别：this.$nextTick会优先执行回调
            // setTimeout延迟执行回调
             setTimeout(()=>{
                 console.log(44444);
             },0)
             this.$nextTick(()=>{
                 console.log(22222);
             })           
             console.log(33333);
        }
    },
    components:{
        vue06s,
        vue06ss
    },
   
}
</script>

// 可配置的变量
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 配置入口文件地址
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
    },
  },
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave:false,
  // http:127.0.0.1:80
  devServer:{
    // localhost 127.0.0.1都可以写
    // 第一种方法 缺点：只能请求一个
    // 注意事项：它会先从本地查到 
    // 如果有那就不会继续向80端口请求数据
    // proxy:"http://127.0.0.1:80"
    proxy:{
      // 前缀
      "/api":{
        target:'http://localhost:80',
        pathRewrite:{"^/api":""},
        changeOrigin:true
      }
    }
  }
})