Vue.js Passing Props While Using Vue JSX


Example

We have a parent component: Importing a child component in it we'll pass props via an attribute. Here the attribute is 'src' and we're passing the 'src' too.

ParentComponent.js

import ChildComponent from './ChildComponent';
export default {
    render(h, {props}) {
        const src = 'https://cdn-images-1.medium.com/max/800/1*AxRXW2j8qmGJixIYg7n6uw.jpeg';
        return (
           <ChildComponent src={src} />   
        );
    }
};

And a child component, where we need to pass props. We need to specify which props we are passing.

ChildComponent.js:

export default {
    props: ['src'],
    render(h, {props}) {
        return ( 
            <a href = {props.src} download = "myimage" >
                Click this link
            </a>
        );
    }
};