vue 组件间的传值方式

绝地灬酷狼 2022-11-30 12:44 228阅读 0赞

**1.兄弟间传值**

（1）小项目通过eventBus

eventBus.js:

// 定义一个新的vue实例专门用于传递数据，并导出
    import Vue from 'vue'
    export default new Vue()

兄弟A：定义传递的方法名和传输内容，点击事件或钩子函数触发$emit事件

<template>
      <div class="A">
        <h2>我是A</h2>
        <p @click="toBClick">点击向兄弟B传递数据</p>
        <child1></child1>
      </div>
    </template>
    
    <script>
    // 引入eventBus，其实就是引入另一个vue实例
    import eventBus from '../../common/js/eventBus'
    
    import child1 from './Child1'
    
    export default { 
      components: { child1},
      methods: { 
        toBClick () { 
          // 定义方法名，和要传输的数据
          eventBus.$emit('fromA', '我是小可爱，来自A火星')
        }
      }
    }
    </script>
    <style scoped>
    .A{ 
      width: 260px;
      height: 300px;
      margin: 50px 50px;
      padding: 10px 10px;
      border: 1px solid blue;
    }
    p{ 
      margin-top: 15px;
      padding: 10px 10px;
      background: palegreen;
    }
    </style>

兄弟B：显示传过来的值，在mounted执行。

<template>
     <div class="B">
         <h2>我是B</h2>
        <p>来自兄弟A的值：{ { content}}</p>
     </div>
    </template>
    
    <script>
    // 引入
    import eventBus from '../../common/js/eventBus'
    
    export default{ 
      data () { 
        return { 
          content: ''
        }
      },
    
      // 在这里执行数据获取的方法
      mounted () { 
        this.getA()
      },
      methods: { 
        getA () { 
          let that = this
          eventBus.$on('fromA', function (val) { 
            // 这里的that指的是项目vue的实例，用that接收，与eventBus的vue作区分
            that.content = val
          })
        }
      }
    }
    </script>
    
    <style scoped>
    .B{ 
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid green;
    }
    p{ 
        margin-top: 20px;
        line-height: 15px;
    }
    </style>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150]  
（2）大项目用vuex，使用vuex，要先 npm i vuex 一下哦

封装：

index.js

\*as的意思是 导入这个文件里面的所有内容

import Vue from 'vue'
    import Vuex from 'vuex'
    // 导入相应的模块
    import * as getters from './getters'
    import * as actions from './actions'
    import * as mutations from './mutations'
    
    Vue.use(Vuex)
    
    // 声明一个需要全局维护的状态 ,也就是共同的状态
    const state = { 
      name: '默认值'
    }
    
    // 注册引入的模块
    const store = new Vuex.Store({ 
      // 状态
      state,
      // 获取数据并渲染
      getters,
      // 数据的异步操作
      actions,
      // 处理数据的唯一途径，state的改变或赋值只能在这里
      mutations
    })
    
    // 用于导出并在main.js中引用
    export default store

actions.js

// 给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理
    export function xiuClick ({ commit}, name) {  // commit 提交；name即为点击后传递过来的参数
      return commit('xiuClick', name)
    }
    export function xiuClick1 ({ commit}, name) { 
      return commit('xiuClick1', name)
    }
    // ES6精简写法
    // export const modifyAName = ({commit},name) => commit('modifyAName', name)

mutations.js

// 提交 mutations是更改Vuex状态的唯一合法方法
    export const xiuClick = (state, name) => {  // A组件点击更改名称为 A
      state.name = name // 把方法传递过来的参数，赋值给state中的name
    }
    export const xiuClick1 = (state, name) => {  // B组件点击更改名称为 B
      state.name = name
    }

getters.js

// 获取最终的状态信息
    export const name = state => state.name

main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      store,
      components: {  App },
      template: '<App/>'
    })

兄弟A组件：

<template>
      <div class="A">
        <h2>我是A的{ { name}}</h2>
        <p @click="xiuClick('A')">点击修改为A</p>
        <child1></child1>
      </div>
    </template>
    
    <script>
    // 引入eventBus，其实就是引入另一个vue实例
    import { mapActions, mapGetters} from 'vuex'
    
    import child1 from './Child1'
    
    export default { 
      components: { child1},
      methods: { 
        // 语法糖
        ...mapActions(
          // 相当于this.$store.dispatch('modifyName'),提交这个方法
          ['xiuClick']
        )
      },
      computed: { 
        // 动态计算属性，相当于this.$store.getters.resturantName
        ...mapGetters(['name'])
      }
    }
    </script>

兄弟B组件：

<template>
     <div class="B">
        <h2>我是B的{ { name}}</h2>
        <p @click="xiuClick1('B')">点击修改为B</p>
     </div>
    </template>
    
    <script>
    // 引入
    import { mapActions, mapGetters} from 'vuex'
    
    export default{ 
      data () { 
        return { 
        }
      },
      methods: { 
        // 语法糖
        ...mapActions(
          // 相当于this.$store.dispatch('modifyName'),提交这个方法
          ['xiuClick1']
        )
      },
      computed: { 
        // 动态计算属性，相当于this.$store.getters.resturantName
        ...mapGetters(['name'])
      }
    }
    </script>

**2.父传子：父组件使用props向子组件传递数据（在父组件内定义，在子组件里用props接收）**

父组件:

<template>
      <div class="parent">
        <h2>{ {  msg }}</h2>
        <child1 psMsg="父传子的内容:我是你爸爸"></child1> 
      </div>
    </template>
    
    <script>
    import child1 from './Child1'
    export default { 
      components: { child1},
      name: 'Index',
      data () { 
        return { 
          msg: '父组件'
        }
      },
      methods: { 
      }
    }
    </script>
    <style>
    .parent{ 
      width: 260px;
      height: 300px;
      margin: 50px 50px;
      padding: 10px 10px;
      border: 1px solid blue;
    }
    </style>

子组件:

<template>
     <div class="son">
        <p>{ {  sonMsg }}</p>
        <p>子组件接收到内容：{ {  psMsg }}</p>
     </div>
    </template>
    
    <script>
    export default{ 
      name: 'Child1',
      data () { 
        return { 
          sonMsg: '子组件'
        }
      },
      props: ['psMsg']
    }
    </script>
    
    <style>
    .son{ 
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid green;
    }
    p{ 
        margin-top: 20px;
        line-height: 15px;
    }
    </style>

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 1]

**3.子传父：子组件主要通过事件传递数据给父组件，在子组件中通过$emit来自定义一个事件，在父组件中调用该事件，从而得到从子组件中传给父组件的值。**

子组件：

<template>
     <div class="son">
        <p>子组件</p>
        <p @click="chuanClick()">点击向父组件传值</p>
     </div>
    </template>
    
    <script>
    export default{ 
      name: 'Child1',
      data () { 
        return { 
          sonMsg: '儿子来了'
        }
      },
      methods: { 
        chuanClick () { 
          this.$emit('sonMsg1', this.sonMsg)
        }
      }
    }
    </script>
    
    <style scoped>
    .son{ 
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid green;
    }
    p{ 
        margin-top: 20px;
        line-height: 15px;
    }
    p:nth-child(2){ 
        padding: 10px 10px;
        border: 1px solid palegreen;
        background: palegreen;
    }
    </style>

父组件：

<template>
      <div class="parent">
        <h2>父组件</h2>
        <p>父组件接收的内容：{ { getMsg}}</p>
        
        <child1 @sonMsg1='getsonMsg'></child1>
      </div>
    </template>
    
    <script>
    import child1 from './Child1'
    export default { 
      components: { child1},
      name: 'Index',
      data () { 
        return { 
          getMsg: ''
        }
      },
      methods: { 
        getsonMsg (sonMsg) { 
          this.getMsg = sonMsg
        }
      }
    }
    </script>
    <style scoped>
    .parent{ 
      width: 260px;
      height: 300px;
      margin: 50px 50px;
      padding: 10px 10px;
      border: 1px solid blue;
    }
    p{ 
      margin: 15px;
    }
    </style>

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150]: /images/20221123/42db82ba26ef4e9dbfa64afc2078e2ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 1]: /images/20221123/27fd00f54a9c40479708493aa77e994b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 2]: /images/20221123/0bced1ada6954468bb262ca5aa5ac1a3.png