[vue]組件的導入

時間 2019-11-19

標籤 vue 組件導入简体版

原文原文鏈接

參考: http://vue2.mmxiaowu.com/article/584a3957fc007e72b0f576d9html

vue組件的註冊

1.經過components方式註冊
2.經過router方式註冊(二者能夠並行存在).
3.若是是render+router方式, 那麼router只能寫在render的組件template裏.vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <app01></app01>
    <router-link to="/app001">/app001</router-link>
    <router-link to="/app002">/app002</router-link>
    <router-view></router-view>
</div>


<template id="app01">
    <div>
        <p>app01</p>
    </div>
</template>

<template id="app001">
    <div>app001</div>
</template>

<template id="app002">
    <div>app002</div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let app01 = {
        name:'app01',
        template: "#app01",
    };

    let app001 = {
        name:'app001',
        template: "#app001",
    };
    let app002 = {
         name:'app002',
        template: "#app002",
    };

    let routes = [
        {path: '/app001', component: app001},
        {path: '/app002', component: app002},
    ];

    let router = new VueRouter({routes});
    let vm = new Vue({
        el: "#app",
        components: {
            app01
        },
        router
    })
</script>
</body>
</html>

router方式靈活,能夠做爲components註冊組件的子組件存在

做爲誰的子, 取決於router-link和router-view寫在誰下了.
node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <app01></app01>
</div>


<template id="app01">
    <div>
        <p>app01</p>
        <router-link to="/app001">/app001</router-link>
        <router-link to="/app002">/app002</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="app001">
    <div>app001</div>
</template>

<template id="app002">
    <div>app002</div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let app01 = {
        template: "#app01",
    };

    let app001 = {
        template: "#app001",
    };
    let app002 = {
        template: "#app002",
    };

    let routes = [
        {path: '/app001', component: app001},
        {path: '/app002', component: app002},
    ];

    let router = new VueRouter({routes});
    let vm = new Vue({
        el: "#app",
        components: {
            app01
        },
        router
    })
</script>
</body>
</html>

render方式註冊組件

上面這個連接裏說了: render+router
webpack

方法1:
render: c => c(app01)做用:web

0,註冊組件
1.生成標籤
2.自動插入標籤
特色: 會覆蓋div.app下的內容vue-router

方法2:
render: c => c('app01')做用:vue-cli

1.生成標籤
2.自動插入標籤app

特色: 會覆蓋div.app下內容3d

document的的建立標籤方法
code

方法3: template

template: ' ' 做用:
1,生成標籤
2,插入標籤

特色: 會覆蓋app下內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>test</h1>
</div>

<template id="app01">
    <div>
        <p>app01</p>
    </div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let app01 = {
        name: 'app01',
        template: "#app01",
    };

    let vm = new Vue({
        el: "#app",
        template: '<app01/>',
        components: {
            app01
        }
    })
</script>
</body>
</html>

小結:

render: c => c('app01')	template: ' '
1.生成標籤	1.生成標籤
2.插入標籤	2.插入標籤
覆蓋app下的內容	覆蓋app下的內容
配合runtime用	配合vue.js用

局部組件	全局組件
1.建立	1,建立
2.註冊	-
3.使用	3,使用

第二欄是 template: '<app01/>'

webpack: 使用render+runtime-only方式

方法1

new Vue({
    el: '#app',
    render: creatElment => creatElment(App),
});

方法2
經過render渲染一個元素, 而後把 App 當組件來用

new Vue({
    el: '#app',
    render: c => c('App'),
    components: {
        App
    }
});

注意: 這種狀況下, App 組件並非根組件

webpack: 使用vue.js

方法3:

<div id="app">
    <App></App>
</div>

import Vue from '../node_modules/vue/dist/vue.js'
import App from "./App.vue";


new Vue({
    el: '#app',
    components: {
        App
    }
});

方法4：

import Vue from '../node_modules/vue/dist/vue.js'
import App from './App.vue'

new Vue({
    el: '#app',
    template: '<App/>',
    components: {
        App
    }
});

webpack: vue-cli使用的方式

vue-cli默認使用的是../node_modules/vue/dist/vue.js,而非runtime.

import Vue from '../node_modules/vue/dist/vue.js'

import App from './App.vue'
import login from './components/login.vue';
import register from './components/register.vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

let routes = [
    {path: '/login', component: login},
    {path: '/register', component: register},
];
let router = new VueRouter({routes});

new Vue({
    el: '#app',
    template: '<App/>',
    components: {App},
    router
});

將login和register直接導入App.vue
將login和register先導入account.vue, 在將account.vue導入App.vue/

router方式導入

./components/login.vue

<template>
    <div>login</div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style scoped>

</style>

./components/register.vue

<template>
    <div>register</div>
</template>

<script>
    export default {
        name: "register"
    }
</script>

<style scoped>

</style>

./components/account.vue

<template>
    <div>
        <router-link to="/account/login">/account/login</router-link>
        <router-link to="/account/register">/account/register</router-link>
        <router-view></router-view>
    </div>

</template>

<script>
    export default {
        name: "account"
    }
</script>

<style scoped>

</style>

App.vue

<template>
    <div id="app">
        <router-link to="/account">/account</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'app',
    }
</script>
<style>
</style>

import 方式實現

./components/login.vue

<template>
    <div>login</div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style scoped>

</style>

./components/register.vue

<template>
    <div>register</div>
</template>

<script>
    export default {
        name: "register"
    }
</script>

<style scoped>

</style>

./components/account.vue

<template>
    <div>
        <p>account</p>
        <login></login>
        <register></register>
    </div>

</template>

<script>
    import login from './login.vue';
    import register from './register.vue';

    export default {
        name: "account",
        components: {
            login,
            register
        }

    }
</script>

<style scoped>

</style>

App.vue

<template>
    <div id="app">
        <account></account>
    </div>
</template>
<script>
    import account from './components/account.vue'

    export default {
        name: 'app',
        components: {
            account
        }
    }
</script>
<style>
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。