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,val,default,300,组件,imgHeight,type
来源： https://www.cnblogs.com/96net/p/16538657.html