每天一点点之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",1111);
父组件
<searchH ref="searchH" @changes="aaa()"></searchH> methods:{ aaa(e){ console.log(e) } }