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)   
        }
    }
  • 相关阅读:
    Python 面向对象(初级篇)
    python中的运算符
    初识Python
    浅谈计算机
    Zeppelin interperter 模式设置总结图解2
    maven 使用错误
    TensorFlow anaconda命令备忘
    zeppelin ERROR总结
    YARN 命令总结
    Zeppelin interperter 模式设置总结图解1
  • 原文地址:https://www.cnblogs.com/cap-rq/p/10317352.html
Copyright © 2011-2022 走看看