Vue利用props從html向內傳遞組件的值

時間 2019-11-24

標籤 vue 利用 props html 向內傳遞組件欄目 HTML 简体版

原文原文鏈接

<body>
    <div id="box">
        <father fathertxt='hello' fatherimg='img/1.png'></father>
        <!-- 此處父組件只是向子組件傳遞值因此前面能夠不用冒號 -->
    </div>

    <!--tempalte-->
    <template id="tf">
        <div>
            <chlid :sontxt='fathertxt' :sonimg='fatherimg'></chlid>
            <!-- 此處的sontxt、sonimg在是子組件的一個屬性因此前面要加冒號（用v-bind來綁定屬性） -->
        </div>
    </template>

    <template id="ts">
        <div>
            <span>{{ sontxt }}</span>
            <img :src='sonimg' />
        </div>
    </template>
</body>

<script>
    var vm = new Vue({
        el: '#box',
        data: {},
        components: {
            'father': {
                template: '#tf',
                props:['fathertxt','fatherimg'],//用props定義須要從外部傳入的值的名稱
                
                //注意子組件定義要放在父組件下
                components: {
                    'chlid': {
                        template: '#ts',
                        props:['sontxt','sonimg']
                    }
                }
            }
        }
    })
</script>

特別要注意冒號的使用（做爲屬性時要有冒號，不做爲屬性是不用；不然會可能出現以下報錯）javascript

相關標籤/搜索