<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>Pay special attention to the use of colons (colons should be used as attributes, not used as attributes; otherwise, the following error may occur)
