一、组件:内部封装html代码
步骤:
1.创建组件
2.组件注册
3.组件使用
全局注册
全局注册A组件
组件被注册在全局范围内,在任何一个Vue实例对应的模板中都可以使用该组件。my-com
示例
<body>
<div id="app">
{
{msg}}
<br>
--- 组建的使用---
<br>
<my-com></my-com>
</div>
</body>
<script>
//1.创建组件
let myCom = {
data() {
return {
comMsg: "组件数据"
}
},
// 模板
template: `
<div>
<span>{
{comMsg}}</span>
<span>{
{comMsg}}</span>
<button @click="comMsg='新数据123'">更改数据模型中的数据</button>
</div>
`
};
// 2.组件注册
// 全局注册
Vue.component(&#