vue的多层主键的通信

来源:互联网 发布:淘宝代销货图片签协议 编辑:程序博客网 时间:2024/05/19 08:43
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="vue1.0.25.js" ></script></head><body><div id="app"><my-parent  :imgtitle='title' :imgsrc='img'></my-parent></div><template id="my_img" >    <img :src="imgsrc" alt="" / width="200">    </template><template id="my_title" >    <h2>{{title}}</h2>    </template><template id='my_parent'><div><child1 :imgsrc='imgsrc'></child1><child2 :title='imgtitle'></child2></div></template><script type="text/javascript">let Child1=Vue.extend({template:'#my_img',props:['imgsrc']})let Child2=Vue.extend({template:'#my_title',props:['title']})//注册父主键Vue.component('my-parent',{props:['imgtitle','imgsrc'],components:{'child1':Child1,'child2':Child2},template:'#my_parent'})new Vue({el:'#app',data:{title:'我是不是很漂亮',img:'04表单提交/img/btns.png'}    })</script></body></html>

原创粉丝点击