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 } }

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

  • 相关阅读:
    重定向 重写
    php 安装 event 和 libevent 扩展
    curl 和 tcpdump
    yum 升级php版本
    shell 教程
    shell脚本 inotify + rsync 同步脚本
    nodesj中 中间件express-session的理解
    node.js中express-session配置项详解
    我对面向对象的理解
    BootstrapValidator
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/8658381.html
Copyright © 2011-2022 走看看