<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- v层 -->
<div id="app">
<div>
<p>{{mov1}}</p>
<child-com></child-com>
</div>
</div>
<div>
<div>
<p>{{mov1}}</p>
<child-com></child-com>
</div>
</div>
<!-- // 内嵌模板 -->
<template id='child1'>
<fieldset>
<legend>
<h1>{{msg}}</h1>
</legend>
</fieldset>
</template>
<script src="../../vue.js"></script>
<script>
// 定义局部组件
const vm = new Vue({
el: '#app',
data: {
name: 'ycy',
word: 'abcabcbacbcbab岁月的童话',
mov1: "狼的孩子雨和雪"
},
// 所有的局部组件都需要加s
components: {
"childCom": {
data() {
return {
msg: '局部子组件'
}
},
template:'#child1'
}
}
});
</script>
</body>
</html>
vue 局部组件 所有的局部组件都需要加s
最新推荐文章于 2024-08-05 14:19:20 发布