Vue组件间的参数传递

Vue组件间的参数传递：

1、父子组件传值

父组件传给子组件：子组件通过props方法接收数据；

<div id="app">
    <!--父组件,可以在引用子组件的时候,通过 属性绑定(v-bind: )的形式,把 需要传递给子组件的数据,以属性绑定的形式,传递到
    子组件内部,供子组件使用-->
    <com1 :parentmsg="msg"></com1>
</div>
var vm = new Vue({
        el: '#app',
        data: {
            msg: '~~~我是父组件中的数据！！！---'
        },
        methods: {},
        components:{
            // 子组件中默认无法访问父组件上 data 中的数据和 method 上的方法
            com1:{
                template:'<h1>我是子组件的文字 --- {{parentmsg}}</h1>',
                props:['parentmsg']
            //    把父组件传递过来的 parentmsg 属性,现在props 数组中定义一下,才能使用
            }
        }
    });

通过v-bind指令绑定parentmsg，传到子组件内部，子组件通过props注册一下传过来的parentmsg，就可以接收到父组件的值。

2、子组件向父组件传值

子组件传给父组件：$emit方法传递参数；

<div id="app">
    <com1 @get-data = 'getData'></com1>
    <P >{{msg}}</P>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        methods: {
            getData(data){
                this.msg = data;
            }
        },
        components:{
            // 子组件中默认无法访问父组件上 data 中的数据和 method 上的方法
            com1:{
                template:'<h1>' + '我是子组件的文字---' +'<button @click="setData">传值到父组件</button></h1>',
                data() {
                    return {
                        sonMsg:"儿子！！！"
                    }
                },
                methods: {
                    setData() {
                        this.$emit("get-data",this.sonMsg);
                    }
                }
            }
        }
    });
</script>

• 子组件需要以某种方式去触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给相应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

非父子组件可以使用VueX-数据仓库去传值