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>
  • 相关阅读:
    最大正数pascal程序
    部落卫队pascal解题程序
    使用递归和非递归遍历二叉树
    机器学习 Numpy库入门
    C++ 多态性和虚函数
    C++ 利用栈解决运算问题
    C++ 字符串分割
    C++继承与派生
    机器学习基础
    C++ 输出文件编码控制
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9226256.html
Copyright © 2011-2022 走看看