Vue学习------------（16）组件的初步使用（旧）
组件的基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//3.使用组件
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpn = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
<p>我是内容，呵呵呵呵</p>
</div>`
})
//2.注册组件
Vue.component('my-cpn', cpn)
const app=new Vue({
el : '#app'
})
</script>
</body>
</html>
步骤解析
- Vue.extend():
- 调用Vue.extend()创建的是一个组件构造器
- 通常在创建组件构造器时，传入template代表我们自定义组件的模板
- 该模板就是在使用到组件的地方，要显示的HTML代码
- 事实上这种写法在Vue2.x文档中已经看不到了，而是相对应的语法糖写法
- Vue.compotent():
- 调用Vue.compotent()是将组件构造器注册为一个组件，并且给它起一个组件的标签名称
- 需要传递两个参数：1、注册组件的标签名 2、组件构造器
- 组件必须挂载在某个Vue实例下，否则它不会生效
全局组件和局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//3.使用组件
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpn = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
<p>我是内容，呵呵呵呵</p>
</div>`
})
//2.注册组件（全局组件，意味着可以在多个Vue的实例下面使用）
//Vue.component('my-cpn', cpn)
const app=new Vue({
el : '#app'，
components: {
//局部组件，意味着只能在当前Vue的实例下使用
//my-cpn 使用组件的标签名
//cpn 组件构造器
'my-cpn': cpn
}
})
</script>
</body>
</html>
父组件和子组件
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//创建第一个组件构造器（子组件）
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
</div>`
})
//创建第二个组件构造器（父组件）
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，呵呵呵呵</p>
<cpn1></cpn1>
</div>` ,
components: {
cpn1: cpnC1
}
})
//root组件
const app = new Vue({
el: '#app' ,
components: {
'cpn2': cpnC2
}
})
</body>
</html>
注册组件语法糖：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//全局组件注册的语法糖
Vue.compotent('cpn1' ，{
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
</div>`
})
//root组件
const app = new Vue({
el: '#app' ,
components: {
//局部组件注册的语法糖
'cpn2': {
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，呵呵呵呵</p>
</div>`
}
}
})
</body>
</html>
组件模板抽离写法：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
//方法一：script标签，注意类型必须为x-template
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
</div>
</script>
//方法二：template标签
<template id="ccc">
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//组件模板抽离写法
Vue.compotent('cpn' ，{
template: '#cpn'
}）
//root组件
const app = new Vue({
el: '#app' ,
})
</body>
</html>
浙公网安备 33010602011771号