Руководство по трем способам использования компонентов vue

Vue.js

существуетvue angular reactБольшая фронтенд-эра трех интерфейсных фреймворков. Многие люди выбираютvue,существуетgithubВверхstar,vueпревысилreactномер. Несмотря на то чтоstarне представляетvueСильнее, но по скорости развития,vueДействительно быстро.

В эпоху модульного интерфейса все является компонентом,vueКомпоненты обучения очень важны.

Но большинству людей знакомы чистыеhtml,jqПосле первого контактаvueКогда дело доходит до компонентов, он ослеплен.

Сегодня самым простым способом мы приносимvueМаленькие белые детские туфли, шагните в мир компонентов~

Сегодня поговорим о трех способах использования компонентов

  1. основные компоненты
  2. глобальный компонент
  3. Компоненты конструкции

1. Четыре шага основных компонентов

  1. Напишите компоненты (ерунда~)
  2. Ссылочные компоненты на странице
  3. объявить компоненты в компонентах
  4. использовать на странице

давайте возьмемbuttonПодкомпонент в качестве примера

Структура источника проекта:

Компоненты обычно помещаются в папку компонентов:

1. Напишите подкомпонент:

<template>
  <button class="btn" :style="{color:color}">
    <slot/> <!-- 插槽 -->
  </button>
</template>

<script>
export default {
  // 传入子组件的参数写到props
  props: {
    color: {
      type: String, // 颜色参数类型
      default: "#000"  // 默认黑色
    }
  }
}
</script>

<style scoped>
  .btn {
    width: 110px;
    height: 60px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
  }
</style>

2.3.4. Родительский компонент:

<template>
  <div id="app">
    <!-- 4. 在页面上使用 -->
    <Button color="red">我是插槽的值</Button>
  </div>
</template>

<script>
// 2. 在页面种引用组件
import Button from '@/components/Button.vue'
export default {
  name: "app",
  // 3. 在components中声明组件
  components: {
    Button
  }
};
</script>

Эффект:

2. Пять шагов глобальных компонентов

  1. Пишите компоненты (еще бред~)
  2. Подкомпоненты добавляют метод установки
  3. существуетmain.jsцитируется в
  4. использоватьVue.useметод
  5. использовать на странице

1. Подкомпонент остался прежним~~:

2. Добавьте метод установки в подкомпонент

Button.js :

import ButtonComponent from './Button.vue'

// 添加install方法 （插件方法）
const Button = {
  install: function (Vue) {
    Vue.component("Button", ButtonComponent);
  }
}

// 导出Button
export default Button

Конечно, вы можете обрабатывать несколько глобальных компонентов:

import ButtonComponent1 from './Button1.vue'
import ButtonComponent2 from './Button2.vue'
import ButtonComponent3 from './Button3.vue'

const buttonList = [
    ButtonComponent1,
    ButtonComponent2,
    ButtonComponent3
];
// 添加install方法 （插件方法）
const Button = {
  install: function (Vue) {
    buttonList.forEach(button=>{
        // 这里 使用每个组件的 name 属性作为组件名
        Vue.component(button.name, button);
    })
  }
}

// 导出Button
export default Button

3.4. main.js

import Vue from 'vue'
import App from './App.vue'
// 3
import Button from '@/components/Button.js'
// 4
Vue.use(Button);
new Vue({
  render: h => h(App),
}).$mount('#app')

5. Используйте на странице

app.vue:

<template>
  <div id="app">
    <!-- 5. 在页面上使用 -->
    <Button color="blue">我是全局按钮</Button>
  </div>
</template>

Эффект следующий:

3. Четыре шага для создания компонентов

  1. Пишите компоненты (все равно **ерунда~)
  2. vue.extendкомпоненты сборки
  3. устанавливатьVue.prototype
  4. использовать в js

1. Напишите подкомпонент:

<template>
  <p class="Message">{{value}}</p>
</template>

<script>
export default {
  data() {
    return {
      value: "我是一个弹框"
    };
  }
};
</script>

<style>
.Message {
  position: fixed;
  bottom: 30px;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 10px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 30px;
  text-align: center;
  font-size: 15px;
  animation: messageFade 3s 1;
}
/* 加个简单动画 */
@keyframes messageFade {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 80%, 0);
    transform: translate3d(-50%, 80%, 0);
  }
  16% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  84% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 80%, 0);
    transform: translate3d(-50%, 80%, 0);
  }
}
</style>

2. vue.extendкомпоненты сборки

Message.js :

import Vue from 'vue';
import Message from './Message.vue';
// 构造组件
const MessageConstructor = Vue.extend(Message);
// 设置删除组件
const removeDom = (target) => {
    target.parentNode.removeChild(target);
};
// 构造组件添加关闭方法
MessageConstructor.prototype.close = function() {
    this.visible = false;
    removeDom(this.$el);
};

const MessageDiv = (options) => {
    // 实例化组件
    const instance = new MessageConstructor({
        el: document.createElement('div'),
        // 组件参数，运用到组件内的data
        data: options,
    });
    // 在body添加组件
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => {
        instance.timer = setTimeout(() => {
            // 定时关闭组件
            instance.close();
        }, 3000);
    });
    return instance;
};

export default MessageDiv;

3. КреплениеVue.prototype

main.js :

import Message from '@/components/Message.js'
Vue.prototype.$message = Message;

4. Используйте:

<template>
  <div id="app">
    <Button color="blue" @click.native="msg">我是全局按钮</Button>
  </div>
</template>

<script>
import Button from "@/components/Button.vue";
export default {
  name: "app",
  components: {
    Button
  },
  methods: {
    msg() {
      // 4. 使用构造组件
      this.$message({value:'我是构造组件'});
    }
  }
};
</script>

Эффект:

Вышеизложенное является основным использованием трех компонентов~~

Категории