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