vue中父子组件传值，子父之间传值，组件之间传值方法总结

可能由于vue用的还是比较少，之前都是用vuex来进行变量共享的，老是忘记，这里做个总结，方便后期查询。

父子组件传值

方法：

通过props来进行父子组件之间的通信

1. 父组件中通过v-bind传参数
2. 子组件通过props接受参数
3. 依赖注入(另外一种非响应式但是可以递归传值的方法请看这篇文章)

例子

<!-- 父组件 -->
<template>
    <div>
        this is parent
        <child :name = "name" v-bind = "options" :arr = "testArr" @test="test"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
        name: 'parent',
        components: {
            child
        },
        data() {
            return {
                name: 'wcx',
                options: {
                    age: 12,
                    sex: 'man'
                },
                testArr: [1,23,4]
            }
        },
        methods: {
            test(msg) {
                this.name = msg;
            }
        }

    }
</script>
<style lang="less">

</style>

<!-- 子组件 -->
<template>
    <div>
        {{name}}
        {{age}}
        {{sex}}
        {{arr[1]}}
        <button @click = "showmsg">传值给父组件</button>
    </div>
</template>
<script>
export default {
    props:{
        name: {
            type: String,
            default: function() {
                return 'hello'
            }
        }, 
        age: Number, 
        sex: String,
        arr: Array
    },
    data() {
        return {

        }
    },
    methods: {
        showmsg() {
            this.$emit('test', 'child')
        }
    }
}
</script>
<style lang="less">
    
</style>

就像上面代码写的那样，只要v-bind在父组件中的子组件中传入参数，子组件通过props捕获即可且不需要在子组件的data中声明。

子父组件传值

方法：

通过自定义事件来进行父子组件之间的通信

1. 在父组件中写一个事件以及触发后的回调函数，并写好形参。
2. 在子组件中用原生事件触发一个回调函数，里面写成如下形式：$vm.emit('父组件中定义的xx事件', '要传的参数')

例子

同父子组件之间的例子

组件间的传参

方法：

通过vuex来管理

1. 安装vuex
2. Vue.use(vuex)
3. 对 vuex中store进行实例化
4. 在vue的实例中传入store
5. 通过store.commit('store中定义好的方法', '需要传的参数 ')改变参数
6. 在需要传参的组件中通过computed和watch进行监听捕获需要的参数

例子

<!-- 需要传参的组件 -->
<template>
    <div>
        this is parent
        {{param1}}
        <button @click = "test">parentbtn</button>
        <child></child>
    </div>
</template>
<script>
    import child from './child';
    export default {
        name: 'parent',
        components: {
            child
        },
        data() {
            return {
                param1: this.$store.state.param1
            }
        },
        methods: {
            test() {
                this.$store.commit('f1', 1)
            }
        },
        //利用computed监听vuex值的变化
        computed: {
            listenStore() {
                return this.$store.state.param1;
            }
        },
        //利用watch监听computed中listenStore函数的变化并将新值赋给本组件中定义的变量
        watch: {
            listenStore: {
                handler(newValue, oldValue) {
                    this.param1 = this.$store.state.param1;                
                },
                deep: true
            }
        }

    }
</script>
<style lang="less">

</style>

//main.js 入口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 Vuex from 'vuex'

Vue.config.productionTip = false;

Vue.use(Vuex);//放在最前面
const store = new Vuex.Store({//创建store实例
  state: {
    param1: 0
  },
  mutations: {
    f1(state, param) {
      state.param1 = param;
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//传入vue实例的内部
  components: { App },
  template: '<App/>'
})
``
# 【完】