zoukankan      html  css  js  c++  java
  • 每天一点点之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)   
        }
    }
  • 相关阅读:
    shell 参数个数
    小坑也难受
    MaHua简介
    airflow Operators
    datax
    T-SQL 更新表操作
    T-SQL时间函数
    linux学习网站
    好看的页面
    函数-1
  • 原文地址:https://www.cnblogs.com/cap-rq/p/10317352.html
Copyright © 2011-2022 走看看