vue 父组件向子组件传值:props

<img :src="imgSrc" :width="imgWidth" :height="imgHeight" :alt="title" @click="doSomething">
子组件写
 props:{
        imgWidth: {
            type: Number,
            default: 300
        },
        imgHeight: {
            type: Number
        },
        title: {
            type: String,
            default: ''
        },
        imgSrc: {
            type: String,
            default: ''
        }
    }

父组件

父组件Father.vue导入子组件:

<hw-child :img-src="imgSrc" :img-width="300" :img-height="imgHeight" title="静态文字" @onEmitFunction="emitFuction"></hw-child>

如果传给子组件的是一个变量或者数字,则需要前面加上:(v-bind的缩写)绑定。

import Child from './Children.vue'
export default {
    components: {
        hwChild: Child,
    },
    data() {
        return {
            imgHeight: 300,
            imgHeight: 300,
            imgSrc: '//www.96net.com.cn/try/2016/06/23/15395220917905380014.jpg'
        }
    },
    methods: {
        emitFuction(val) {
            console.log(val);
            alert('获取子组件参数:'+ val);
        }
    }
}
 
 
posted @   学无边涯  阅读(415)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
历史上的今天:
2020-07-31 jquery 属性操作3大类别
2020-07-31 jquery CSS属性操作方法总结
2018-07-31 php ecshop采集商品添加规则
2018-07-31 学python2.7简单还是python3.0简单,两者区别
点击右上角即可分享
微信分享提示