<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<mparent :imgsrc="img" :title="title"></mparent>
</div>
<template id="img_child">
<img :src="imgsrc" width="200" height="200">
</template>
<template id="title_child">
<h2>{{title}}</h2>
</template>
<template id="my_parent">
<div>
<child1 :imgsrc="imgsrc"></child1>
<child2 :title="title"></child2>
</div>
</template>
<script src="js/vue.js"></script>
<script>
//js
//
let childImg = Vue.extend({
template: "-sharpimg_child",
props: ["imgsrc"]
});
let childTitle = Vue.extend({
template: "-sharptitle_child",
props: ["title"]
});
//
Vue.component("mparent", {
props: ["imgsrc", "title"],
components: {
"child1": childImg,
"child2": childTitle
},
template: "-sharpmy_parent"
});
new Vue({
el: "-sharpapp",
//Vue
data: {
img: "img/ad.png",
title: ""
},
});
</script>
</body>
</html>
