vue组建传参-蒲公英云

vue组建传参

亦凉 2021-12-10 16:35 532阅读 0赞

一、父子组件传参

vm.$emit( event, arg ) //触发当前实例上的事件

【子传父】借助一个中转的父组件自定义函数，在子组件中利用 $emit 触发父组件的这个中转函数事件，传递的参数作为中转函数的参数传给父组件，

子组件：login.vue

<template> 
    <section>
        <div class="login">
            <label>
                <span>用户名：</span>
                <input type="text" v-model="username" @change="setUser"/>
            </label>
        </div>
    </section>  
</template>
<script>
export default {
    name: 'footer',
    data(){
        return{
            username:""
        }
    },
    methods: {
        setUser(){
            //利用transferToParents事件传给父组件
            this.$emit('transferToParents',this.username);
        }
    }
}
</script>
<style scoped>
.login{
  position: fixed;
  top: 160px;
  height:60px;
  width: 100%;
  background:#333;
  color: aliceblue;
  line-height: 60px;
}
</style>

父组件：

<p>login组建传过来的参数__用户名：{
   {logindata}}</p>
<loginDiv @transferToParents="getUser"></loginDiv>

script中引入子组件，并获取数据

<script>
//引入子组件
import loginDiv from './components/login'
export default {
  name:"app",
  data(){
    return{
      logindata:''
    }
  },
  components:{
    loginDiv
  },
  methods: {
    getUser(msg){
      this.logindata = msg;
      console.log('input输入框的值:',msg);
    }
  }
}
</script>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70

【父传子】子组件使用props接收父组件的数据。

子组件：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1

父组件：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 2

二、兄弟组件传参

Vuex该出场了….待续。。。

Vuex都可以什么组件之间都可以传参

假设是组件header和组件content之间的传参：header中input获取的文本值显示在组件content中

组件header，更改author

组件content，实时显示更改的author

vuex的所有配置都写在store.js中,将store.js import到main.js中

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

在mutation中定义更改state状态变量的事件，在组件中使用时，利用this.$store.commit触发调用，才可完成对state的修改。

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    author:"GreyJK"
  },
  mutations: {
    concatAuthor(state,msg){
      msg = msg.replace(/([A-Z])/g,' -$&');
      state.author = msg;//使用msg该笔author
    }
  }
})

state：状态

mutation：对state改变的处理事件

组件header，更改author

组件content，实时显示更改的author

组件中使用state中的状态变量author

组件content:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 3

组件header：

input的输入值双向绑定到inputtext

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 4

按钮按下调用changeAuthor事件，事件负责提交store.js中的mutation对象的concatAuthor事件。

-——————————————————————————————————————————————————————————————————————————————————-

mapState, mapGetters, mapActions, mapMutations ，这种就是相当于在本组件中给store.js中对应的action、mutation等的方法赋别名…..

mapState, mapGetters, mapActions, mapMutations 就是简化我们的一些 this.$store.state.* 的操作，将this.$store.* 里面的状态映射到我们辅助函数的属性值里面
方便我们在组件中调用。【https://www.jb51.net/article/138226.htm】

例如：

computed: {
 ...mapState({
 viewsCount: 'views'
 }),
 ...mapGetters({
 todosALise: 'getToDo' // getToDo 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
 })
 },
 methods: {
 ...mapMutations({
 totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法
 }),
　　 ...mapActions({
 blogAdd: 'blogAdd' // 第一个blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个blogAdd 才是actions里面函数方法名称
 })