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-父组件和子组件的更多相关文章

  1. vue 父组件传递子组件事件

    在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...

  2. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  3. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  4. Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  5. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  6. vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  7. Vue系列之 => 父组件向子组件传值

    父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...

  8. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  9. vue 的父组件和子组件互相获取数据和方法

    父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...

  10. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 开源项目Telegram源码 Telegram for Android Source

    背景介绍 Telegram 是一款跨平台的即时通信软件,它的客户端是自由及开放源代码软件.用户可以相互交换加密与自毁消息,发送照片.影片等所有类型文件.官方提供手机版.桌面版和网页版等多种平台客户端. ...

  2. 六、CSS 选择器：BeautifulSoup4

    和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...

  3. kafka相关操作

    kafka安装 下载 wget http://apache.gree.com/apache/kafka/1.0.2/kafka_2.11-1.0.2.tgz tar -zxvf kafka_2.11- ...

  4. nginx配置中root和alias的区别

    例:访问http://127.0.0.1/download/*这个目录时候让他去/opt/app/code这个目录找. 方法一(使用root关键字): location / { root /usr/s ...

  5. JSP中 JSTL和EL标签的使用

    使用JSTL前的准备 想要使用JSTL,首先需要给工程导入JSTL的包(JSTL.jar和standard.jar). JSTL简介 JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应 ...

  6. hdu6470 矩阵快速幂+构造矩阵

    http://acm.hdu.edu.cn/showproblem.php?pid=6470 题意 \(f[n]=2f[n-2]+f[n-1]+n^3,n \leq 10^{18}\),求f[n] 题 ...

  7. 在实际工作中使用requests+unittest进行接口测试

    之前学习python做接口测试时,用的时requests+excel的方式来进行接口测试,后来在工作中也用unittest来做了一个项目的接口测试,接口测试用例完全基于unittest来编写,把大致步 ...

  8. 与某军工背景软件企业分享Azure DevOps Server的经验

    DevOps 是英文单词Development和Operations的组合词,是一种用于促进软件开发.运维实施和质量保障部门之间协同工作的过程和方法. 结合软件开发管理规范,应用自动化的构建.测试和发 ...

  9. POJ 2594 （传递闭包 + 最小路径覆盖）

    题目链接: POJ 2594 题目大意:给你 1~N 个点, M 条有向边.问你最少需要多少个机器人,让它们走完所有节点,不同的机器人可以走过同样的一条路,图保证为 DAG. 很明显是 最小可相交路径 ...

  10. app版本升级的测试点

    移动端版本更新升级是一个比较重要的功能点,主要分为强制更新和非强制更新. 1.强制更新需要测试的点有: 1)强制升级是否可以升级成功 从老版本的包升级到新版版的包是否可以升级成功. 2)升级后的数据是 ...