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

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

把需要封装的组件模板写在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. ssh远程连接不上linux

    远程连接工具是:Xmanager Enterprise 5-->Xshell linux 发行版本是:CentOS-6.3-x86_64 问题:ssh一直都可以远程连接上linux,一段时间后突 ...

  2. linux的RPM软件包管理工具

    RPM(Redhat Package Manage)原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采 ...

  3. 【tomcat】servlet原理及其生命周期

    1.什么是servlet? Servlet(Servlet Applet),全称Java Servlet,是用Java编写的服务器端程序.而这些Servlet都要实现Servlet这个接口.其主要功能 ...

  4. Hadoop 2.4.1+HBase 0.98.6.1 分布式安装

    参考:http://blog.csdn.net/wind520/article/details/39856353

  5. npm 安装 cannot find module

    window7安装module出现 Connot find module 'xxx' 解决办法: 添加环境变量命名为:NODE_PATH 设置值为:%AppData%\npm\node_modules ...

  6. 自测 基础 js 脚本。

    <html> <head> <script> //function(<text>a{[]}lert('x')</text>)() docum ...

  7. 【工具向01】——markdown 文本编辑语言相关

    markdown简介 Markdown是一种轻量级标记语言创始人为约翰·格鲁伯.它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML或HTML文档".这种语言吸 ...

  8. Python学习--12 异常处理、调试

    异常捕获 语法格式: try: pass except xxx as e: pass except xxx as e: pass ... else: pass finally: pass except ...

  9. ADB命令获取Android UID

    有三种方案: 1. adb shell dumpsys package <packagename> | grep userId= 先通过 "adb shell dumpsys p ...

  10. docker-使用ali云加速

    ali专用网络加速地址; https://yq.aliyun.com/articles/29941 使用ali加速 vim /etc/sysconfig/docker 添加: ADD_REGISTRY ...