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

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

把需要封装的组件模板写在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. flask_maple使用文档

    安装 To install Flask-Maple: pip install flask-maple Or alternatively, you can download the repository ...

  2. Linux系统Bash的常用功能(9)

    了解了基本的Linux文件文件系统的概念后,我们将更深入的了解一下Linux的其他方面的内容,那就是我们所使用的用户接口,也就是大家常听到的 『Shell』 ,『这个shell并不是黑客反弹的shel ...

  3. scanf的拓展用法——匹配特定字符

    scanf的基本用法除了常规的输入操作外还有一些特殊的用法,使用这些用法可以很方便的在输入中读取想要的数据 1.限制输入数据的长度 这个应该算不上拓展用法,大多数读者应该都曾经使用过,这里简单提一下 ...

  4. Android根据字符串型的资源名获取对应资源id

    有时候我们想动态的根据一个字符串资源名获得到对应的资源id,如根据不同的图片名称获得对应的图片,此时就应该考虑如何实现. 大家知道,在编译Android工程时,系统会自动生成一个静态资源类R,里面根据 ...

  5. 移动一根火柴使等式成立js版本

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. Doxygen的使用，配置及实例

    Doxygen是一种开源跨平台的,以类似JavaDoc风格描述的文档系统,可以从一套归档源文件开始,生成文档 下载Doxygen + Graphviz Doxygen可以生成动态文档 Graphviz ...

  7. D3.js的基础部分之选择集的处理 过滤器、选择集的顺序、each()和call()的应用(v3版本)

    选择集的处理 : 过滤器 有时候需要根据绑定数据对某选择集的元素进行过滤,例如某公司,只对id大于100的员工进行奖励.某学校只选拔身高超过170cm的学生等.类似这样的问题,需要根据条件获取选择集的 ...

  8. Vue的声明周期

    以下简单介绍,以自己的理解进行分析.如有不好,请大牛勿喷!!!!!! new Vue() 创建 Vue 实例 beforeCreate(){}: 第一生命周期 表示实例完全创建出来,此函数执行是,da ...

  9. android studio 一直卡在Gradle:Build Running的解决办法

    转:android studio 一直卡在Gradle:Build Running的解决办法   在使用AS开发安卓应用程序的时候经常会遇到Gradle build running一直在运行甚至卡死的 ...

  10. Web API 2 对于 Content-Length 要求严格

    最近在做一个工具,里面有一个发起http请求的操作,虽然工具不是用.NET写的,但是测试用服务器软件是.NET写的.在这里选择了ASP.NET MVC和Web API 2. 首先预定义Student与 ...