Detaillierte Erläuterung der Vue-Komponenten und der Datenübertragung

In diesem Artikel stellen wir die Vue-Serie (3) im Detail vor: Komponenten und Datenübertragung, Routing, Einzeldateikomponenten, Vue-Cli-Gerüst und hoffen, dass sie Ihnen helfen kann.

1. Komponente

1. Was ist eine Komponente?

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（对象）

2. So definieren Sie Komponenten

方式1：先创建组件构造器，然后由组件构造器创建组件
方式2：直接创建组件

<p id="itany">
        <hello></hello>
        <my-world></my-world>
    </p>

    <script>
        /**
         * 方式1：先创建组件构造器，然后由组件构造器创建组件
         */
        //1.使用Vue.extend()创建一个组件构造器
        var MyComponent=Vue.extend({
            template:'<h3>Hello World</h3>'
        });
        //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
        Vue.component('hello',MyComponent);
        
        /**
         * 方式2：直接创建组件(推荐)
         */
        // Vue.component('world',{
        Vue.component('my-world',{
            template:'<h1>你好，世界</h1>'
        });
        var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
            el:'#itany',
            data:{
                msg:'网博'
            }
        });    
    </script>

Klassifizierung von Komponenten

分类：全局组件、局部组件

Klassifizierung von Komponenten

<p id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </p>

    <script>
        /**
         * 全局组件，可以在所有vue实例中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data:function(){ //在组件中存储数据时，必须以函数形式，函数返回一个对象
                return {
                    name:'alice'
                }
            }
        });
        /**
         * 局部组件，只能在当前vue实例中使用
         */
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom'
            },
            components:{ //局部组件
                'my-world':{
                    template:'<h3>{{age}}</h3>',
                    data(){
                        return {
                            age:25
                        }
                    }
                }
            }
        });    
    </script>

4. Referenzvorlagen

将组件内容放到模板<template>中并引用,必须有且只有一个根元素

Referenzvorlagen

<p id="itany">
        <my-hello></my-hello>
        <my-hello></my-hello>
    </p>

    <template id="wbs">
        <!-- <template>必须有且只有一个根元素 -->
        <p>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </p>
    </template>

    <script>
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{
                    name:'wbs17022',  //指定组件的名称，默认为标签名，可以不设置
                    template:'#wbs',
                    data(){
                        return {
                            msg:'欢迎来到南京网博',
                            arr:['tom','jack','mike']
                        }
                    }
                }
                
            }
        });    
    </script>

5. Dynamische Komponenten

<component :is="">组件
    多个组件使用同一个挂载点，然后动态的在它们之间切换    

<keep-alive>组件

Dynamische Komponenten

<p id="itany">
        <button @click="flag=&#39;my-hello&#39;">显示hello组件</button>
        <button @click="flag=&#39;my-world&#39;">显示world组件</button>


        <p>
            <!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建 -->
            <keep-alive>
                <component :is="flag"></component>    
            </keep-alive>
        </p>
    </p>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:'my-hello'
            },
            components:{
                'my-hello':{
                    template:'<h3>我是hello组件：{{x}}</h3>',
                    data(){
                        return {
                            x:Math.random()
                        }
                    }
                },
                'my-world':{
                    template:'<h3>我是world组件：{{y}}</h3>',
                    data(){
                        return {
                            y:Math.random()
                        }
                    }
                }
            }
        });    
    </script>

2. Datenübertragung zwischen Komponenten

1. Definieren Sie eine weitere Komponente innerhalb einer Komponente, genannt Eltern-Kind-Komponente

Untergeordnete Komponenten können nur innerhalb der übergeordneten Komponente verwendet werden

Standardmäßig können untergeordnete Komponenten nicht auf Daten in der übergeordneten Komponente zugreifen und der Umfang jeder Komponenteninstanz ist unabhängig
2. Datenübertragung (Kommunikation) zwischen Komponenten 2.1 Untergeordnete Komponenten greifen auf Daten von übergeordneten Komponenten zu

Hinweis: Es gibt drei Formen von Daten in Komponenten:

a)在调用子组件时，绑定想要获取的父组件中的数据
b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据
总结：父组件通过props向下传递数据给子组件

,

, data2.2 Übergeordnete Komponente greift auf Daten untergeordneter Komponenten zupropscomputed

Übergeordnete-untergeordnete Komponente und Datenübertragung zwischen Komponenten

3. Einzelner unidirektionaler Datenfluss

a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据
总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

Einseitiger Datenfluss

4. Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
    方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
    方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
        a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
            需要显式地触发一个更新事件
        b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

Kommunikation zwischen nicht übergeordneten Komponenten und untergeordnete Komponenten

3. Slot-Inhaltsverteilung

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

4. Vue-Router-Routing

1

本意：位置、槽
作用：用来获取组件中的原内容，类似angular中的transclude指令

Referenz

2. Grundlegende Verwendung

使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

Grundlegende Routing-Nutzung

3. Routenverschachtelung und Parameterübergabe

bower info vue-router
cnpm install vue-router -S

4. Routeninstanzmethoden

a.布局
b.配置路由

<p id="itany">
        <p>
            <!-- 使用router-link组件来定义导航，to属性指定链接url -->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </p>
        <p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <!-- router-view用来显示路由内容 -->
            <router-view></router-view>
        </p>
</p>

<script>
        //1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var News={
            template:'<h3>我是新闻</h3>'
        }
        //2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'} //重定向
        ]
        //3.创建路由实例
        const router=new VueRouter({
            routes, //简写，相当于routes:routes
            // mode:'history', //更改模式
            linkActiveClass:'active' //更新活动链接的class类名
        });
        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router //注入路由
        });
    </script>

5. Route kombiniert mit Animation

Routenverschachtelung und Parameterübertragung, Animation

传参的两种形式：
    a.查询字符串：login?name=tom&pwd=123
        {{$route.query}}
    b.rest风格url：regist/alice/456
        {{$route.params}}

5. Einzelne Datei Komponente

1. .vue-Datei

router.push()  添加路由，功能上与<route-link>相同
router.replace() 替换路由，不产生历史记录

2. Webpack

Webpack

4. Beispiel, Schritte:

.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

.vue文件由三部分组成：<template>、<style>、<script>
    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js
    </script>

4.1 Erstellen Sie ein Projekt mit der folgenden Verzeichnisstruktur:

浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的

webpack-demo

webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件 
简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出

4.2 Schreiben Sie App.vue

4.3 Installieren Sie zugehörige Vorlagen

webpack版本：v1.x v2.x

webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下

4.4 Schreiben Sie main.js

4.5 Schreiben Sie webpack.config.js

|-index.html
|-main.js   入口文件       
|-App.vue   vue文件
|-package.json  工程文件 //npm init --yes
|-webpack.config.js  webpack配置文件
|-.babelrc   Babel配置文件

4.6 Schreiben Sie .babelrc

4.7 Schreiben Sie package.json

4.8 Führen Sie den Test aus

cnpm install vue -S

cnpm install webpack -D
cnpm install webpack-dev-server -D

cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D  //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板

合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

Webpack-Demo

import Vue from 'vue' //引入内置模块
import App from './App.vue' //引入自定义模块，需要加./

render:function(h){ //使用render函数（推荐）渲染组件,和compnents一样
        return h(App);
    }

/* scoped表示该样式只在当前组件中有效 */

6. vue-cli scaffolding

1. Einführung

2. Beispiel, Schritte:

Offizielles Website-Installationsbeispiel

npm run dev

2.1 Installieren Sie vue-cli und konfigurieren Sie die Vue-Befehlsumgebung

2.2 Initialisieren Sie das Projekt, generieren Sie eine Projektvorlage

vue-cli是一个vue脚手架，可以快速构造项目结构
vue-cli本身集成了多种项目模板：
    simple  很少简单
    webpack 包含ESLint代码规范检查和unit单元测试等
    webpack-simple 没有代码规范检查和单元测试
    browserify 使用的也比较多
    browserify-simple

2.3 Geben Sie das generierte Projektverzeichnis ein, installieren Sie das Modulpaket

2.4 Ausführen

3. Webpack-Vorlage verwenden

cnpm install vue-cli -g
vue --version
vue list

Offizielle Website

语法：vue init 模板名  项目名

Referenz Vue-Lehrvideo: Videokurse der Vue.js 2.0 Family Bucket-Serie (vue, vue -router, axios, vuex)

cd vue-cli-demo
cnpm install

Verwandte Empfehlung:

npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

Detailliertes Beispiel eines Chatrooms für die Eltern-Kind-Kommunikation zwischen Vue-Komponenten

vue init webpack vue-cli-demo2

ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格

So übertragen Sie Daten zwischen vue.js-Komponenten

问题Bug：如果版本升级到node 8.0 和 npm 5.0，控制台会报错：
    GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
解决方法：
    a)降低Node版本到7.9或以下
    b)修改build/dev-server.js文件，如下：
        var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () => {},
          heartbeat:2000 //添加此行
        })
    参考：https://github.com/vuejs-templates/webpack/issues/731

Vuejs2.0 implementiert die Paging-Komponente mithilfe von $emit zur Ereignisüberwachung, Datenübertragung_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Komponenten und der Datenübertragung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!