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);
}
}
}
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 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简单,两者区别