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. python生产者和消费者模式实现(二)多进程方式

    import timeimport randomfrom multiprocessing import Process, Queue # 生产者def producer(q, i): food = ' ...

  2. Oracle Merge Into 使用注意事项

    我们操作数据库的时候,有时候会遇到insertOrUpdate这种需求.如果数据库中存在数据就update,如果不存在就insert.Orcale数据库都提供了 MERGE  INTO 方法来处理这种 ...

  3. 使用 shopfiy 模板语言，创建产品模板以搭配购物车实现一键购买

    shopfiy 的 product 在添加产品时,如果要将产品详情页面与购物车关联,就是在详情页里面直接下单,而不是从详情页通过点击购买按钮,跳到 shopfy stroe ,再从这个位置再跳转到下单 ...

  4. .net core从版本 3.0 迁移到 3.1引发的BUG

    前几天微软的.net core3.1发布后,随把visual studio 2019升级到16.4.1版本并把项目进行框架升级.升级后的项目在IdentityServer4授权后在360安全浏览器竟然 ...

  5. C语言中变量和函数的作用域和链接属性

    C语言中变量和函数的作用域和链接属性 作用域 代码块作用域: 代码块指的是使用"{}"包围起来的部分. 在代码块中定义的变量,代码块之外是不能访问的. 代码块嵌套之后的变量作用域, ...

  6. I2C硬件与模拟的区别

    硬件I2C对应芯片上的I2C外设,有相应I2C驱动电路,其所使用的I2C管脚也是专用的,因而效率要远高于软件模拟的I2C:一般也较为稳定,但是程序较为繁琐. 硬件(固件)I2C是直接调用内部寄存器进行 ...

  7. 6.1 Spark SQL

    一.从shark到Spark SQL Hive能够把SQL程序转换成map-reduce程序   可以把Hadoop中的Hive看作是一个接口,主要起到了转换的功能,并没有实际存储数据. Shark即 ...

  8. day56_9_20orm中的关键字段，orm查询13方法整合，查询优化和事务。

    一.常用字段. 在orm中有一些字段是常用字段: 1.AutoField 这个字段是自增的,必须填入参数primary_key=True,也就是说这个字段是表的主键,如果表类中没有自增列,就会自动创建 ...

  9. Vue介绍（一）

    官网:https://cn.vuejs.org/ Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.V ...

  10. JDOJ3007 铺地板I

    JDOJ3007 铺地板I https://neooj.com/oldoj/problem.php?id=3007 题目描述 有一个大小是 2 x N(1 <= N <= 105)的网格, ...