Vue.js 父子组件相互传递数据

父组件向子组件传递消息

父亲组件中的代码如下：

<template>
        <CheckCart
                   :allNum="productsnum"//向子组件传递的数据productsnum，
        ></CheckCart>
</template>

<script>
    import CheckCart from "./CheckCart";
    export default {
        name: "receive-money-model",
        components: {
            CheckCart,
        },
        data() {
            return {               
                productsnum: 0, //产品数目
            }
        },

        methods: {}
    }
</script>

<style scoped>
</style>

大家仔细看，在CheckCart组件中有这么一条数据：:allNum=”productsnum”。productsnum是父组件的变量名，而allNum是子组件中用来接收数据的变量名。

子组件代码

<template>
    <div>数量：{{allNum}}</div>
</template>
<script>
    export default {
        props: ['allNum'],
        name: "check-cart",
        data() {
            return {
            }
        },
    }
</script>
<style scoped>
</style>

在子组件中，你首先要做的就是注册属性名： props: [‘allNum’],注意：allNum必须和父组件中使用的名字是一样的。只需要这一句话，你就可以无所畏惧的使用了。

 

使用router-view如何在父子组件间传递消息

其实这个还是蛮简单的，代码如下： 
1.router-view中的代码如下：

<router-view ref="productObj" v-on:viewIn="changeTitle" ></router-view>

•  

2.调用子组件 中的方法和属性代码如下：

this.$refs.productObj.getIsEmpty();

•  

3.子组件中调用父组件中的方法：

this.$emit('viewIn', "首页");