每天一点点之vue框架开发 - vue组件之间传值（父向子传值）

路由文件

{
    path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/productList', children: [
        {
            path: '/productList',
            components: {
                default: Banner,
                product_list: ProductList
            }
        }
    ]
},

这个是中间文件（也就是父级）

<template>
    <div class="product">
        <router-view  :aaa="aaa"></router-view>
        <router-view  name="product_list"></router-view>
    </div>
</template>

<script>
export default {
    data(){
        return {
            aaa:{
                name_en:'PRODUCT',
                name_zh:'MIRROR产品'
            }
        }
    }
}
</script>

在父级设置参数，如果是aaa='aaa',此时传的是aaa的字符串，而:aaa="aaa"传的是对象（或数组）

在子页面接收参数

export default {
  props:['aaa'],
  computed:{
    my(){
      this.banner = this.aaa
      console.log(this.aaa,'aaa')
    }
  },
}

通过 props 来接收父级传过来的参数，然后在 使用computed属性将收到的值赋给当前组件的data中的banner。

最后要记得在子页面中调用 my() 方法

<template>
    <div>
      {{my}}
    </div>
</template>

子组件向父组件传值

子组件

this.$emit("changes",);

父组件

<searchH ref="searchH" @changes="aaa()"></searchH>

methods:{
    aaa(e){
        console.log(e)
    }
}