Компоненты для Vue


Компоненты, не относящиеся к одному файлу

Использование не однофайловых компонентов

  • Создание компонентов
  const school = Vue.extend({
    //定义组件时不使用el,因为所有的组件都将使用vm管理
    template:`
        <div></div>
    `,
    data(){
        return{
              schoolname:'atguigu',
              address:'beijing'
        }
    },
    methods(){

    }
  })
Войдите в полноэкранный режим Выход из полноэкранного режима
  • Записывайте данные как функцию — чтобы избежать ссылок на данные при повторном использовании компонентов

    • Регистрация компонентов
  • Регистрация компонентов локально

    //创建vm
    new Vue({
        //决定组件放在哪个容器下
        el:'#root'
        //注册组件
        components:{
            school
        }
    })
    
  • Глобальная регистрация компонентов

    vue.component('school',school)
    
    • Использование компонентов
  <school></school>
Войдите в полноэкранный режим Выход из полноэкранного режима

Обратите внимание:

  • Именование компонентов

    • Именование компонентов одним словом
    • Начальные заглавные буквы:Школа (рекомендуется)
    • Все строчные буквы: школа
    • Именование компонентов с помощью нескольких слов
    • Начальные заглавные буквы (именование в шашлычном регистре):MySchool (рекомендуется)
    • Используйте связку — между двумя словами (именование в верблюжьей палочке):my-school
    • Элемент конфигурации name можно использовать при определении компонента, чтобы указать имя, под которым компонент будет отображаться в инструментах разработчика.
  • Как писать теги компонентов

    • — Самозакрывающийся стиль письма

    Если строительные леса не используются, последующие компоненты не будут визуализированы

  • Сокращенная регистрация компонентов

  const school = Vue.extend({...})
  简写为:
  const school = {...}
Войдите в полноэкранный режим Выход из полноэкранного режима

Вложенные компоненты

  • Только один компонент приложения управляется в vm
  new vue({
    el:'#root',
    components:{
        app
    }
  })
Войдите в полноэкранный режим Выход из полноэкранного режима
  • Приложение содержит другие компоненты
  const app = Vue.extend({
    components:{
        school,
        student
    }

  })
Войдите в полноэкранный режим Выход из полноэкранного режима

VueComponent

  • Школьный компонент — это, по сути, конструктор для VueComponent, созданный Vue.extend

  • Мы просто пишем тег компонента, а Vue анализирует его, чтобы помочь создать экземпляр компонента школы, т.е. Vue помогает, выполняя: new VueComponent(options)

  • Каждый раз, когда вызывается Vue.extend, возвращается новый VueComponent

  • на что это указывает:

    • В конфигурации компонента: функция данных, функция в методах, функция в часах, функция в вычислениях, все они имеют это как объект экземпляра VueComponent
    • в новой конфигурации Vue(options):
    • функции данных, функции в методах, функции в watch, функции в computed, все они являются экземплярами Vue
  • VueComponent будет называться vc в собственном смысле слова

Объекты экземпляров Vue будут называться vm

Встроенные взаимосвязи компонентов

vm имеет некоторые возможности, которых нет у vc, например, el mount points

Компоненты одного файла

App.vue

App.vue — это начальный файл, и все компоненты управляются через App.vue

Вам необходимо представить, зарегистрировать и использовать компоненты в App.vue

<template>
    <div>
        <School></School>
        <Student></Student>
</template>
<script>
    //引入组件
    import School from "./School";
    impotr Student from "./Student";
    //控制组件的交互
    export default {
        name:'App',
        //注册组件
        components: {
            School,
            Student
        }
    }
</script>
<style></style>
Войдите в полноэкранный режим Выход из полноэкранного режима

main.js

Управляйте App.vue из main.js

Необходимо представить, зарегистрировать, использовать App.vue , использовать el указанный контейнер

import App from "./App.vue"

new Vue({
    el: '#root',
})
Войдите в полноэкранный режим Выход из полноэкранного режима

index.html

Создайте контейнер в файле index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</html>
Войдите в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий