<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>Title
</title>
<script
src=
"./js/vue.js"
>
<
/script>
</head>
<body>
<div
id=
"app"
>
<my-parent :
imgsrc=
"img" :
imgtitle=
"title"
></my-parent>
</div>
<template
id=
"parent"
>
<div
id=
"my_parent"
>
<my-title :
title=
"imgtitle"
></my-title>
<my-img :
imgsrc=
"imgsrc"
></my-img>
</div>
</template>
<template
id=
"my_title"
>
<h2>{{title}}
</h2>
</template>
<template
id=
"my_img"
>
<img :
src=
"imgsrc"
alt=
""
>
</template>
<script>
let
my_title
=
Vue
.
extend
({
template:
'#my_title'
,
props:
[
'title'
]
})
let
my_img
=
Vue
.
extend
({
template:
'#my_img'
,
props:
[
'imgsrc'
]
})
Vue
.
component
(
'my-parent'
,
{
template:
'#parent'
,
props:
[
'imgsrc'
,
'imgtitle'
],
components:
{
'my-title'
:
my_title
,
'my-img'
:
my_img
}
})
new
Vue
({
el:
'#app'
,
data:
{
img:
'./js/01.png'
,
title:
'简体字好看多了，容易写！'
}
})
<
/script>
</body>
</html>
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
