<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        #app{

            width:100%;

            height:100px;

            background:red;

        }

        .box{

            width:100%;

            height:30px;

            background:yellow;

        }

    </style>

</head>

<body>

<div id="app" @click="onmessage()">

    {{ message }}

    <one-component todo="haha"></one-component>

    <two-component a="enen"></two-component>

    <div class="box" v-for="(item,index) in lala" :key="index">

            <laaaaaa :bbb="item"></laaaaaa>

    </div>

</div>

<script>

    var objarr=[

        {id:0,text:"二"},

        {id:1,text:"三"},

        {id:2,text:"四"},

        {id:3,text:"五"},

        {id:4,text:"六"},

        {id:5,text:"七"}

    ]

    Vue.component('one-component',{//全局注册

        template:`<div>我是组件{{ todo }}</div>`,

        props:['todo']

    });

    Vue.component('two-component',{//全局注册

        data(){

            return{

                bb:"值"

            }

        },

        template:`<div>我是第二个全局组件{{ a }}{{ bb }}</div>`,

        props:["a"]

    });

    var componentA = { //局部注册组件

            template:`<div>我是局部组件{{ hehe }}{{ bbb.id }}{{ bbb.text }}</div>`,

            data(){

                return{

                    hehe:"我是子组件的值"

                }

            },

            props:["bbb"]

        }

var app=new Vue({

    el:"#app",

    components:{

        "laaaaaa":componentA

    },

    data:{

        message:'页面加载于' + new Date().toLocaleString(),

        lala:objarr

    },

    methods: {

        onmessage(){

            this.message='haha'

        }

    },

    mounted() {

        console.log(this.lala);

    }

});

</script>

</body>

</html>

vue中全局组件与局部组件的注册，以及动态绑定props值的更多相关文章

  1. vue中全局filter和局部filter怎么用?

    需求: 将价值上加上元单位符号(全局filter) <template> <div> 衣服价格:{{productPrice|formatTime}} </div> ...

  2. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 在vue中使用Element的message组件

    在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...

  10. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

随机推荐

  1. centos7 追加python3 + 使用pip + virtualenv

    一.安装Python3的方法: 首先安装依赖包: yum -y groupinstall "Development tools" yum -y install zlib-devel ...

  2. 【IntelliJ IDEA】从资源文件读取出来就中文乱码的解决方法

    在application.properties资源文件中设置两个自定义的属性以及属性值: com.sxd.name = "德玛西亚" com.sxd.want = "王者 ...

  3. Vue生命周期及业务场景使用

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到 ...

  4. 题解 P2661 【信息传递】

    首先介绍个概念:基环外向树,也叫环加外向树,环基树,章鱼图. 这就是一颗基环外向树. 不难发现,若基环外向树有n个结点就有n条边,这也意味 着它不是颗普通的树,而是必定有一个自环. 再看看题目中的介绍 ...

  5. [转载]为什么用Java开发桌面程序的比较少

    这个是本人这几天用javafx开发桌面程序时候想到的,因为虽然javafx比C#之类的确实坑多不少,但是习惯了之后也还行,而且它的一次编译.各处使用真的深得我心.但为什么不流行呢: 作者:bell 来 ...

  6. React学习——通过模态框中的表单，学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...

  7. Base64加密后有换行回车的解决办法

    据RFC 822规定,每76个字符,还需要加上一个回车换行 有时就因为这些换行弄得出了问题,解决办法如下,替换所有换行和回车 String bTemp = Base64.encodeBase64Str ...

  8. 分布式缓存Redis+Memcached经典面试题和答案

    Redis相比memcached有哪些优势? (1) memcached所有的值均是简单的字符串,redis作为其替代者,支持更为丰富的数据类型 (2) redis的速度比memcached快很多 ( ...

  9. centos7.3安装mysql5.7

    一.写随笔的原因:最近在阿里云上买了个centos7.3服务器,想将一些demo运行在上面,所以需要做一些环境的安装,通过此篇文章MAKR一下.下面来记录下安装步骤(参考网上的一些教程,有坑的话会实时 ...

  10. html页面嵌入php代码不显示内容

    新建一个html文件,内容如下: <html> <head> <title>Example</title> </head> <body ...