zoukankan      html  css  js  c++  java
  • vue--传值

    传值:(如果传的是引用类型,当值发生改变时所有绑定他的全都发生改变,如果传的时值类型,就只有他自己发生改变)

    父传子:

    父页面:父组件定义一个属性

    users:[
        {name:'张三',position:'web开发'},
        {name:'张三',position:'web开发'}
    ]

    然后在当前页的子页面标签下加

    <helloworld v-bind:user="users"></helloworld>

    子页面:先在引入

    export default{
        props:['users']
    }

    然后就可以用v-bind:user="users"的user调用父组件的users属性了,
    写法:写法就和调用当前页面的属性一样,

    <ul>
        <li v-for="u in user">{{u.name}},{{u.position}}</li>
    </ul>


    ******严谨写法:props:{传进来的东西:{ type:类型,required:true }}    
        
    子传父:

    需要自定义事件;子组件的点击事件:

    this.$emit('titleChange(这是事件名)','这是需要传的值!');

    父组件:在跟子组件对应的标签下写自定义titleChange事件,执行updateChange()方法:

    <app_herder v-on:titleChange="updateChange($event)" v-bind:str="string">
    </app_herder> methods:{ titleChange:function(val){ this.string=val } }

    在子组件定义事件名和值,然后程序会跑到父组件的当前子组件标签下找定义的事件,然后再执行方法。

  • 相关阅读:
    ES-- Elasticsearch粗略分析
    springMVC之@Request
    Spring Boot入门
    反射四(动态代理)
    反射三(泛型)
    反射二(字段)
    反射一(方法)
    nutch和solr建立搜索引擎基础(单机版)
    Cinnamon桌面是怎么回事儿
    开启属于你的GNOME桌面
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/8658381.html
Copyright © 2011-2022 走看看