Vue.js - props
道具とは何ですか。
:
props
は、親コンポーネントデータを渡すためのカスタムプロパティです.propsコード
<child v-bind:props 속성 이름="상위 컴포넌트의 데이터 이름"></child>
props例
<div id="app">
<app-header v-bind:propsdata="message"></app-header>
</div>
<script>
var appHeader = {
template: '<h1>header</h1>',
props: ['propsdata']
}
new Vue({
el: '#app',
components : {
'app-header' : appHeader
},
data: {
message: 'hi'
}
});
</script>
Vue構成部品は親構成部品-
데이터 이름 : message
app-ヘッダはサブアセンブリ-
props 속성 이름 : propsdata
<div id="app">
<app-header v-bind:propsdata="message"></app-header>
<app-content v-bind:propsdata="num"></app-content>
</div>
<script>
var appHeader = {
template: '<h1>{{ propsdata }} </h1>',
props: ['propsdata']
}
var appContent = {
template: '<div>{{ propsdata }}</div>',
props: ['propsdata']
}
new Vue({
el: '#app',
components : {
'app-header' : appHeader
},
data: {
message: 'hi',
num: 10
}
});
</script>
htmlに{{props属性名}}を入れ、親コンポーネントのデータを画面に出力します
親コンポーネントからデータ値を変更すると、画面も変更されます(反応性)
Reference
この問題について(Vue.js - props), 我々は、より多くの情報をここで見つけました https://velog.io/@sjkim_jinnyk/Vue.js-propsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol