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属性名}}を入れ、親コンポーネントのデータを画面に出力します

  • 親コンポーネントからデータ値を変更すると、画面も変更されます(反応性)