<!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>vue的多层主键的通信
最新推荐文章于 2022-11-04 08:56:50 发布
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
