1.组件的基本使用
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 创建的 Vue 根实例中,把这个组件作为自定义元素来使用: 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<cpnc></cpnc>
</div>
<script src="vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnc = Vue.extend({
template:`
<div>
<h2>标题</h2>
<p>内容1...<p>
<p>内容2...<p>
</div>`
})
// 2.全局注册组件
Vue.component('my-cpn', cpnc)
const app = new Vue({
el:"#app",
data:{
},
components:{
//局部组件创建
cpnc:cpnc
}
})
</script>
</body>
</html>
1.1 创建组件构造器对象
template
中是组件的DOM元素内容。
1.2 注册组件
1.全局注册,通过 。Vue.component
2.局部注册,通过 。components:{cpnc:cpnc}
2. 全局组件和局部组件
组件的注册方式有两种,一种是全局组件一种是局部组件。
<div id="app">
<h2>全局组件</h2>
<my-cpn></my-cpn>
<h2>局部组件</h2>
<cpnc></cpnc>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnc = Vue.extend({
template:`
<div>
<h2>标题</h2>
<p>内容1</p>
<p>内容2</p>
</div>`
})
// 2.注册组件(全局组件,可以在多个vue实例中使用)
Vue.component('my-cpn', cpnc)
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpnc:cpnc
}
})
</script>
全局组件,可以在多个vue实例中使用,类似于全局变量。使用方式注册,直接使用调用。是全局组件的名字,是定义的组件对象。
局部组件,只能在当前vue实例挂载的对象中使用,类似于局部变量,有块级作用域。使用方式与全局变量一样,直接使用调用