1全局组件

  • solt 内置分发组件
  • 应用见局部组件

2局部组件

2.1局部组件的使用:生子 - 挂子 - 用子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    {{msg}}

</div>

<script src="vue.js"></script>

<script>

    //如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容

    //那么template模板的优先级大于el

    // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content

    //第一步:  声子 Vue中组件的首字母要大写, 跟标签区分

    //组件中的data必须是个函数,一定要有返回值

    let App = { //跟的是一个对象  这个对象里 就是除了下面的Vue中,el以外的所有属性

        data() {

            return {text: "我是子组件"}

        },

        //第四步:  给子组件里写内容.  当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系

        //在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************

        template: `

        <div id="a">

            <h2>{{text}}</h2>

        </div>

        `,

        //给子组件定义方法  比如说a标签的超链接

        methods:{

        },

    }

    new Vue({

        el: "#app",  //绑定的是上面的id="app"

        data() {

            return {msg: "alex"}

        },

        //与生命周期有关

        //用模板字符串

        //定义模板

        // 第三步:用子  把<App />写下面就是 用子 但是里面的内容需要写到上面子组件里App里

        // template可以不用写 但是要挂载到 el上去

        template: `

        <div class="app">

            <App><App/>

        </div>

        `,

        components: {

            // 第二步:   挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件

            App   //如果key和value一样,可以只写App 替代App:App

        }

    })

</script>

</body>

</html>

2.2局部组件的使用更改 以及全局组件的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <App></App>

</div>

<script src="vue.js"></script>

<script>

    //如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容

    //那么template模板的优先级大于el

    // 全局组件 ***  第一个参数是组件的名字,第二个参数是options

    // 全局组件声明之后,可以再任意的组件里使用, 放到别的组件之后,就成了别的组件的子组件了

    // 使用内置组件slot进行分发  让让别的组件中的Vbtn按钮显示不同的名称  ******

    Vue.component("Vbtn",{

        data(){ return {}},

        template:`<button><slot>按钮</slot></button> `,

    })

    // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content

    //子组件2

    //第一步:生子2  挂子往App里挂, 不需要挂Vue里

    let Vheader = {//对象

        data(){

            return {}

        },

        //template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****

        template:`

        <div>

        <h2>生子是在子组件中</h2>

        <h2 style="color:red">挂子和用子是在父组件中</h2>

        <Vbtn></Vbtn>

        </div>

        `,

    }

    //第一步:  声子   Vue中组件的首字母要大写, 跟标签区分

    //组件中的data必须是个函数,一定要有返回值

    let App = { //跟的是一个对象  这个对象里 就是除了下面的Vue中,el以外的所有属性

        data() {

            return {text: "我是子组件"}

        },

        //第四步:  给子组件里写内容.  当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系

        //在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************

        // 第三步:用子2   <Vheader></Vheader>,  下一步去对应模板Vheader的template里写内容

        template: `

        <div id="a">

            <h2>{{text}}</h2>

            <Vheader></Vheader>

            <Vbtn>登录</Vbtn>

            <Vbtn>注册</Vbtn>

            <Vbtn>提交</Vbtn>

        </div>

        `,

        // template里的标签必须有一个父标签包裹

        //给子组件定义方法  比如说a标签的超链接

        methods:{

        },

        components:{

            // 第二步:挂子2

            Vheader

        },

    }

    new Vue({

        el: "#app",  //绑定根元素  是上面的id="app"

        data() {

            return {msg: "alex"}

        },

        //根组件中  可以把template删除 直接在id = "app"的div中使用

        // 子组件中的template 不能删除,因为子组件中的结构最终会渲染到id="app"的div里面<App></App>

        components: {

            // 第二步:   挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件

            App   //如果key和value一样,可以只写App 替代App:App

        }

    })

</script>

</body>

</html>

vue中的全局组件和局部组件的应用的更多相关文章

  1. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  2. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  3. Vue基础学习 --- 全局组件与局部组件

    组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...

  4. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  5. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  6. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

  8. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  9. Vue 中的受控与非受控组件

    Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...

随机推荐

  1. 【C#基础概念】命名规范

    1. 引言 本文是一套面向C# programmer 和C# developer 进行开发所应遵循的开发规范. 按照此规范来开发C#程序可带来以下益处: ·         代码的编写保持一致性, · ...

  2. LeetCode-013-罗马数字转整数

    罗马数字转整数 题目描述:罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...

  3. CPU乱序执行基础 —— Tomasulo算法及执行过程

    朋友们可以关注下我的公众号,获得最及时的更新: IBM 360/91浮点单元最先实现Tomasulo算法从而允许乱序执行.360体系只有4个双精度浮点寄存器,限制了编译器调度的有效性.而且,IBM 3 ...

  4. SQL从零到迅速精通【实用函数（3）】

    1.LOWER()函数 使用LOWER函数将字符串中所有字幕字符转换为小写,输入语句如下. SELECT LOWER('BEAUTIFUL'),LOWER('Well'); 2.UPPER()函数 S ...

  5. 伪静态 伪装成静态的网址，只是改变URL的表现形式，实际上还是动态页面

    路由 Route::get('/list_{id}.html','newsController@listoNewone'); 页面详情 <table class="table" ...

  6. think php jq ajax删除

    表单展示页面 <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  7. laravel 终端命令

    创建模块及控制器

  8. ubuntu目录结构

    /:根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中 /bin:/usr/bin:可执行二进制文件的目录,如常用的命令ls. ...

  9. [动态规划] 适合DJ银行的日子

    [动态规划] 适合DJ银行的日子 前言:开始的时候用常规模拟做的超时了,然后看官方题解,大致意思就是连续n天单调可以用动态规划的思想 你和一群强盗准备打劫银行.给你一个下标从 0 开始的整数数组 se ...

  10. 导入导出笔记-easyExcel初探(表格导入和模板化导出)

    前言 本文使用的EasyExcel Alibaba和EasyPoi Apache技术栈分析 EasyExcel Dependency EasyPoi Dependency 1.需求一:表格化需求导入导 ...