版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82745155
单层
<div id="enjoy">
<my-div message="hello girl" imgSrc="../images/fashion-001.jpg"></my-div>
<my-div message="hello boy" imgSrc="../images/fashion-002.jpg"></my-div>
</div>
<template id="my_div">
<div>
<h1>{{message}}</h1>
<!--注意:vue中不支持大写的驼峰式命名-->
<img :src="imgsrc" alt="" width="300">
</div>
</template>
{
//1.创建组件
Vue.component('my-div', {
template: '#my_div',
props:['message','imgsrc']
});
new Vue({
el: '#enjoy',
data: {
msg: 'hello!'
}
})
}
多层
<!--数据必须动态绑定:v-bind 或 : -->
<div id="enjoy">
<my-father :imgtitle="title" :imgsrc="img"></my-father>
</div>
<template id="my_img">
<img :src="imgsrc" width="200" alt="">
</template>
<template id="my_title">
<h2>{{title}}</h2>
</template>
<template id="father">
<div>
<child1 :imgsrc="imgsrc"></child1>
<child2 :title="imgtitle"></child2>
</div>
</template>
{
//1.子组件实例
let Child1=Vue.extend({
template:'#my_img',
props:['imgsrc']
});
let Child2=Vue.extend({
template:'#my_title',
props:['title']
});
//2.注册父组件
Vue.component('my-father',{
template:'#father',
props:['imgtitle','imgsrc'],
components:{
child1:Child1,
child2:Child2
}
});
new Vue({
el:'#enjoy',
data:{
title:'my name is john!',
img:'../images/fashion-001.jpg'
}
})
}