<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>我是标题</h2>
<p> hhhhhh</p>
<cpn1></cpn1>
<cpn2></cpn2>
<cpn3></cpn3>
<cpn4></cpn4>
<cpn5></cpn5>
</div>
<script src="vue.js"></script>
<script>
//创建组件构造器对象
const cpn1 = Vue.extend({
template: `
<div>
<h2>我是组件</h2>
</div>
`
})
//方法1,注册组件,全局，
Vue.component('cpn1', cpn1)
//方法3,一步到位
Vue.component('cpn3', {
template: `
<div>
<h2>我是组件</h2>
</div>
`
})
//组件继承,继承cpn1,子组件可以在本模板中使用
const cpn4 = Vue.extend({
template: `
<div>
<h2>我是父组件</h2>
<cpn1>son</cpn1>
</div>
`,
components: {
cpn1: cpn1
}
})
Vue.component('cpn4', cpn4)
//使用组件
const app = new Vue({
el: "#app",
data: {
},
//方法2,局部组件，只能在本实例中使用,语法糖
components: {
cpn2: cpn1,
cpn5: {
template: `
<div>
<h2>我是组件</h2>
</div>
`
}
}
})
</script>
</body>
</html>
Vue-组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Vue组件组件 Component 定义组件 公共的组件 使用组件 ...
- 最近都是用element-ui 在协助自己的项目开发，用着用着就想看看饿了么是怎么实现组件的使用的，于是就想自己动...
- 总结一下对vue组件通信的理解和使用。 一、组件目录结构 父组件：app.vue 子组件：page1.vue 子组...
- 表单组件实现 Input 1.双向绑定：@input、:value2.派发校验事件 FormItem 1.给Inp...
