补充一下：之前没提到，这里是一个父子组件通信的方法

如果想要使同一个组件实现不同的效果，那么可以这样做。

把需要封装的组件模板写在template中

<template id="counter-template">

    <h1>{{heading}}</h1>

  <button @click="count+1">Submit{{count}}</button>

</template>

其中在建立组件时，用到了一个props属性，可以读取到引用组件里的自定义属性值，并且随着用户的操作进行动态的改变

我觉得这个属性特别的好，还是很好用的，所以在这里记录一下；

能够实现父子组件间的通信，后面还会更新其他一些内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>component</title>

  <script src="Vue.min.js"></script>

</head>

<body>

    <div id="app">

      <counter heading="Likes"></counter>

      <counter heading="DisLikes"></counter>

    </div>

    <template id="counter-template">

        <h1>{{heading}}</h1>

      <button @click="count+1">Submit{{count}}</button>

    </template>

    <script>

       Vue.component('counter',{

         template:'#counter-template',

         props:['heading'],

         data:function(){

           return { count:0};

         }

       });

    </script>

</body>

</html>

Vue之组件使用(二)的更多相关文章

  1. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  2. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  3. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  4. vue的组件化运用（数据在两个组件互传，小问题总结）

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

  5. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  6. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Vue父子组件和非父子组件传值问题

    父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...

  8. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  9. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

随机推荐

  1. Spring IOC 容器源码分析系列文章导读

    1. 简介 Spring 是一个轻量级的企业级应用开发框架,于 2004 年由 Rod Johnson 发布了 1.0 版本.经过十几年的迭代,现在的 Spring 框架已经非常成熟了.Spring ...

  2. 【UOJ244】 【UER #7】短路（贪心）

    传送门 uoj Solution 简单题? 考虑一条路径长什么样子,一定是经过某一个字母环的左上角,那么答案就很简单了. 我们记一个前缀最小值,这样子让他一路走下去一定是最优! 然后扫一遍就好了. 代 ...

  3. Linux的1000个命令

    目录 Linux常用命令 uptime wget uname free who last history pwd cd ls cat head tail tr wc cut diff touch mk ...

  4. Python入门 ---基础知识

    Python入门不知道这些你还是承早放弃吧!真的 Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言 ...

  5. [HAOI2018]染色（容斥+NTT）

    补充一篇详细得不能再详细的题解,比如让我自己看懂. 可能与前面的题解有些相同,我想补充一下自己的想法. 显然,最多 \(K\) 最大为 \(N=min(\lfloor \frac nS\rfloor, ...

  6. vue项目常见需求（项目实战笔记）

    一.起步 1.引入reset.css解决手机之间不同分辨率的问题(reset.css为别人封装的css文件) import './assets/styles/reset.css' 使用方式 1rem= ...

  7. JavaScript 那些不经意间发生的数据类型自动转换

    JavaScript可以自由的进行数据类型转换,也提供了多种显式转换的方式.但是更多的情况下,是由JavaScript自动转换的,当然这些转换遵循着一定的规则,了解数据类型自由转换的规则是非常必要的. ...

  8. idea安装破解永久有效

    首先先在下面地址下载好idea安装包 链接:https://pan.baidu.com/s/1gVl3WAjC_H6jrH2cjK1paw提取码:i2t5 再下载好破解所需的jar包 链接:https ...

  9. 基于alpine用dockerfile创建的nginx镜像

    1.下载alpine镜像 [root@docker43 ~]# docker pull alpine Using default tag: latest Trying to pull reposito ...

  10. Docker 之web api 访问 host sql server

    运行 Docker C:\Users\Administrator>docker run -it  -p 5000:5000 --name myapidocker1 webapiv1 root@3 ...