zoukankan      html  css  js  c++  java
  • Vue之组件使用(二)

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

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

    把需要封装的组件模板写在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>
  • 相关阅读:
    C# switch-case
    Python学习日记之中文支持
    C++学习笔记(一)之指针
    python CGI 编程实践
    linux 配置 python3 CGI
    PowerShell入门简介
    资源整合,总有你想要的
    python 爬虫之 urllib库
    一天学一个Linux命令:第一天 ls
    DG磁盘分区提示错误
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9226256.html
Copyright © 2011-2022 走看看