脚手架第三方包实现兄弟传值(保姆级别教程)

用第三方文件mitt 来实现兄弟之间的传值 ( 功能:Demo1的值传递给Demo2 )

1. 在cmd 里面下载第三方包 npm i mitt -S

    例子:
    C:\Users\tomorrow is better\Desktop\web\03 frontEnd\NO3-
    myself\week2\day3\gy3>npm i mitt -S
    up to date in 838ms
    注意:这里的S是大写  mitt和-之间有间隙 -和S之间没有间隙

2. 重新获取网站地址

2.1 在cmd里面输入npm run dev
2.2 把local里面的地址复制到浏览器里面

例子:
C:\Users\tomorrow is better\Desktop\web\03 frontEnd\NO3-myself\week2\day3\gy3>npm run dev
> gy3@0.0.0 dev
> vite
  VITE v4.0.2  ready in 491 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  

3. 在src里面创建一个文件夹,在文件夹下创建一个js文件里面放mitt方法 (导入--> 创建 --> 导出)

js里面的内容:
    import mitt from 'mitt'
    const emitter = mitt()
    export default emitter

4. 在components里面创建两个兄弟组件分别导入mitt方法(在js里面导入)

       import emitter from '../01 Emiiter/index.js'
   

5. 当我点击button时发送数据 通过emitter.emit('名字和兄弟接收时是一个名字', '传递给兄弟组件的值') //注:emitter是mitt

 <template>
        <div > Demol <button @click="send">send</button> </div>
    </template>

    <script>
    //导入emitter方法(注意:不要忘记写js)
        import emitter from '../01 Emiiter/index.js'
        export default {
            methods:{
                send(){
                    emitter.emit('msg', '12345')  //向兄弟组件Demo2 发送的值12345
                }
            }
        }
    </script>

    <style lang="scss" scoped>

    </style>

6. Demo2接收Demo1的值, 在created里面接收数据,用emitter.on('和发送时是一样的名字', 函数接收通过参数接收 )接收

<template>
    <div>
        Demo2 {{ n }}  渲染
    </div>
</template>

<script>
    import emitter from '../01 Emiiter/index.js'
    export default {
        data(){
            return {
                n:0
            }
        },
        created(){
            emitter.on('msg', (data) => {
                  this.n = data
            })
        }

    }
</script>

<style lang="scss" scoped>

</style>
7. 渲染出来
    <template>
      <div>
        <Demo1></Demo1>
        <Demo2></Demo2>
      </div>
</template>

<script>
    import Demo1 from './components/04 Demo1.vue'
    import Demo2 from './components/05 Demo2.vue'
    export default {

        components:{
           Demo1, Demo2
      },
      data(){
        return {
          str:'hello'  //父组件默认值 传递给子组件
        }
      },

</script>

<style lang="scss" scoped>

</style>

补充: 在安装第三方包时
    -D 开发环境
    -S 生产环境