[英]how to pass props correctly?
I can't pass multiple elements.我不能传递多个元素。 How can I do this?
我怎样才能做到这一点?
export default {
props: {
elem: {
type: Object,
required: true,
},
whichScreen: whichScreen
},
You can add the whichScreen
prop like below :您可以添加如下所示的
whichScreen
道具:
export default {
props : {
elem : {
type: Object,
required: true,
},
whichScreen : String
},
}
you can pass props
to the component like below :您可以将
props
传递给组件,如下所示:
<my-component :elem="{ 'key' : 'value' }" :which-screen="'Screen 1'"></my-component>
Vue.component('my-component', { template: '#tmpl-my-component', props : { elem : { type: Object, required: true, }, whichScreen : String }, }); new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <my-component :elem="{ 'key' : 'value' }" :which-screen="'Screen 1'"></my-component> </div> <template id="tmpl-my-component"> <div> <div><h4>Prop `elem` :</h4> {{elem}}</div> <div><h4>Prop `whichScreen` :</h4> {{whichScreen}}</div> </div> </template>
Here is how to use props in the child component.
以下是如何在子组件中使用道具。
Parent component:-父组件:-
<template>
<div id="app">
<child data="Shreekanth is here"/> // Child component and Ddta attribute passing to child component
</div>
</template>
<script>
import Child from './components/Child.vue' // Child component imported
export default {
name: 'App',
components: {
Child
}
}
</script>
Child component:-子组件:-
<template>
<div>
<div>{{data}}</div> // Used data attribute used in child template
</div>
</template>
<script>
export default {
name: 'Home',
props: {
data: String // How data attribute registed in child component
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.