• 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>
  • 相关阅读:
    js-依次循环异步请求(普通/ES6)
    jquery
    js
    selenium
    selenium
    selenium
    python
    selenium
    selenium
    selenium
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9226256.html
Copyright © 2020-2023  润新知