VUE-父组件和子组件
2024-08-28 12:14:25
1、父组件
const cnp2 = Vue.extend({
template: `
<div>
<h2>我是构造器2</h2>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cnp1
}
})
2、子组件
const cnp1 = Vue.extend({
template: `
<div>
<h2>我是构造器1</h2>
</div>
`
})
解析：父组件和子组件的区分和形成。
当组件存在这种关系的时候，就存在父子关系--------当一个组件在另一个组件中注册，这时候，被注册的组件是子组件，包含着子组件的就是父组件
*****完整代码****
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn2></cpn2>
</div> <body>
<script>
const cnp1 = Vue.extend({
template: `
<div>
<h2>我是构造器1</h2>
</div>
`
})
const cnp2 = Vue.extend({
template: `
<div>
<h2>我是构造器2</h2>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cnp1
}
})
let vm = new Vue({
el: '#app',
data: () => ({}),
components: {
cpn2: cnp2
}
})
</script>
</body> </html>
3、全局组件和局部组件的语法糖写法
优点：省去Vue.extend（）的这种写法，直接用一个对象代替
1、全局组件语法糖
Vue.component('mycpn', {
template: `
<h2>全局组件，语法糖写法</h2>
`
})
2、局部组件语法糖
components: {
mycpn: {
template: `
<h2>局部组件，语法糖写法</h2>
`
}
}
*****完整代码****
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<mycpn />
</div>
<div id="app2">
<mycpn />
</div> <body>
<script>
Vue.component('mycpn', {
template: `
<h2>全局组件，语法糖写法</h2>
`
}) let vm = new Vue({
el: '#app',
components: {
mycpn: {
template: `
<h2>局部组件，语法糖写法</h2>
`
}
}, })
let vm2 = new Vue({
el: '#app2'
})
</script>
</body> </html>
最新文章
- sql中的inner join ,left join ,right join
- MySQL配置文件my.cnf 例子最详细翻译
- Maven的包依赖冲突可引发java.lang.IncompatibleClassChangeError错误
- Linux（centeros）安装weblogic10.3.6教程
- hadoop2.4.1集群搭建
- [转] java中int,char,string三种类型的相互转换
- xcoj 1208 矩阵
- MANIFEST.MF的用途(转载)
- Objective C 快速入门学习一
- UDP网络通信OSC 协议
- 常用jQuery代码02
- Myeclipse 2013 professional 破解，下载
- IDEA 创建maven-web project失败一例
- 论山寨手机与Android 【13】SmartPhone AP系统
- ios 仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View.
- jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索
- vue端口号被占用如何解决
- java~mac下的终端工具oh-my-zsh
- word模板导出的几种方式：第三种：标签替换（DocX组件读取与写入Word）
- How to intall and configure Haproxy on Centos