VUE-父组件和子组件
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>
VUE-父组件和子组件的更多相关文章
- vue 父组件传递子组件事件
在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- vue 的父组件和子组件互相获取数据和方法
父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- MySQL数据库（一）索引
索引的作用是操作数据库时避免全表扫描. 索引的机制 B Tree与B+Tree索引 B(blance) 树可以看作是对2-3查找树的一种扩展,即他允许每个节点有M-1个子节点. 根节点至少有两个子节点 ...
- Eclipse修改JSP文件的默认编码
Eclipse新建JSP文件,可以看到默认使用的是ISO-8859-1编码,如下图,而这种编码是无法保存中文的,不符合我们的需求 那么应该怎样修改呢?找到菜单Window-Preferences,找到 ...
- 18.Llinux-触摸屏驱动(详解)【转】
转自:https://www.cnblogs.com/lifexy/p/7628889.html 本节的触摸屏驱动也是使用之前的输入子系统 1.先来回忆之前第12节分析的输入子系统 其中输入子系统层次 ...
- JavaScript显式类型转换与隐式类型转换
隐式类型转换 四则运算 判断语句 toString 在 JavaScript 中声明变量不需指定类型,对变量赋值也没有类型检查,同时还允许隐式类型转换. 这些特征说明 JavaScript 属于弱类型 ...
- 巡风视图函数源码学习--view.py
记录一下巡风扫描器view.py这个脚本里的视图函数的学习,直接在代码里面做的注释,里面有一些print 代码是为了把数据打印出来小白我自己加的,勿怪勿怪.可能存在一些理解错误和不到位的地方,希望大佬 ...
- Jupyter notebook and Octave kernel installation
Jupyter notebook 安装 为了更加方便地写 Python 代码,还需要安装 Jupyter notebook. 利用 pip 安装 Jupyter notebook. 为什么要使用 Ju ...
- 题解：swj社会摇基础第一课
题目链接 思路:dp,f[i]表示构成i所需要的最小步数 //swj么么哒 #include<bits/stdc++.h> using namespace std; int n; cons ...
- zz传统方法和深度学习结合的感知策略探索
今天分享下 Pony.ai 在感知探索的过程中,使用的传统方法和深度学习方法.传统方法不代表多传统,深度学习也不代表多深度.它们都有各自的优点,也都能解决各自的问题.我们希望发挥它们的优点,并且结合起 ...
- html各种弹出框和提示框
控制台输出 console.log() console.info() confirm() alert() promt() 提示对话框
- NOIP模拟赛 拓展
题目描述 Description \(φ\) 函数是数论中非常常用的函数.对于正整数 \(x\) ,\(φ(x)\) 表示不超过 \(x\) 的所有正整数与 \(x\) 互质的个数. 现在我们对它进行 ...