Vue组件

组件的使用

<!DOCTYPE html>
<html>
  <head>
    <title>组件</title>
    <script src="Vue.min.js"></script>

    <script>
      window.onload = () => {
        Vue.component('Prise', {
          // 模板以及函数
          data: function() {
            return {
              like: 100,
            }
          },
          methods: {
            clickLike: function() {
              this.like++;
            }
          },
          template: `
            <div>
              <p>{{ like }}</p>
              <button v-on:click="clickLike">clickLike</button>
            </div>
          `  
        })
        new Vue({
          el: '#main',
          data: {
              message: 'Welcome XKD!',
          }
        })
      }
    </script>
  </head>

  <body>
    <diV id="main">
      <p>{{ message }}</p>
      <Prise></Prise>
    </diV>
  </body>
</html>

组件的数据传递

...
Vue.component('Prise', {
    // 定义一个props，它是一个数组
    props: ['propsdata', 'dislike'],
    data: function() {
        return {
            like: this.propsdata,
        }
    },
    ...
    template: `
        <div>
            <p>{{ like }}</p>
            <p>{{ dislike }}</p>
            <button v-on:click="clickLike">clickLike</button>
        </div>
    `  
})
...
data: {
    message: 'Welcome XKD!',
    preLike: 500,
    dislike: 10,
}
...
<Prise v-bind:propsdata="preLike" v-bind:dislike="dislike"></Prise>

组件的事件传递

$emit(父组件方法, arguments)

...
    template:`
        <button v-on:click="$emit('propreport',like, 1)">report</button>
    `
    methods: {
        getReport: function(e, number) {
             alert(number);
        }
    }
...

<Prise v-on:propreport="getReport" v-bind:propsdata="preLike" v-bind:dislike="dislike"></Prise>

图片描述

组件传递children

插槽

<slot></slot>

图片描述

动态组件

currentTabComponent：当前显示的组件名称

Vue组件

组件的使用

组件的数据传递

组件的事件传递

组件传递children

动态组件

知否

引用和评论

jQuery 实现淡入淡出效果

开发插件集合

Vue.js-方法与事件

Vue 项目推荐使用这个图标库 vue-icons-plus

从零开始搭建 Vue3 组件库开发环境

这个前端神器，竟让滴滴、美团都爱不释手？！

electron开发采坑小记