2,Vue-組件的註冊(全局-局部)-通訊(父子-子父)-插槽-路由的註冊

時間 2019-11-13

標籤 vue 組件註冊全局局部通訊父子插槽路由欄目系統網絡简体版

原文原文鏈接

2,Vue-組件的註冊(全局-局部)-通訊(父子-子父)-插槽-路由的註冊css

1,組件:https://www.cnblogs.com/GGGG-XXXX/articles/9430076.htmlhtml

2,路由-router:https://www.cnblogs.com/GGGG-XXXX/articles/9430844.htmlvue

el開頭的,是element UI提供的標籤,

卡片代碼.

從element UI粘貼的代碼,vue-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>卡片名稱</span>
            <input type="text" v-model="current">
            <el-button style="float: right; padding: 3px 0" type="text" @click="my_click">操做按鈕</el-button>
        </div>
        <div v-for="(x,y) in doList" :key="y" class="text item">
            {{x}}{{y}}
            <el-alert
                    title="成功提示的文案"
                    type="success"
                    show-icon>
            </el-alert>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            current: '',
            doList: [],
        },
        methods: {
            my_click: function () {
                //把current添加到數組裏,unshift的功能就是把數據放到數組的前面,
                this.doList.unshift(this.current)
            }
        }
    })
</script>
</body>
</html>

卡片代碼

使用卡片的遞進版本npm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>卡片名稱</span>
            <input type="text" v-model="current">
            <el-button style="float: right; padding: 3px 0" type="text" @click="my_click">操做按鈕</el-button>
        </div>
        <div v-for="(x,y) in doList" :key="y" class="text item">
            <!--{{x}}{{y}}-->
            <el-alert
                    :title="x"
                    type="success"
                    show-icon
                    @close='my_close'>
            </el-alert>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            current: '',
            doList: [],
        },
        methods: {
            my_click: function () {
                //把current添加到數組裏,unshift的功能就是把數據放到數組的前面,
                this.doList.unshift(this.current)
            },
            my_close:function () {
                alert('確認刪除')
            }
        }
    })
</script>
</body>
</html>

遞進版本

獲取DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div ref="box">
        ceshi*test
    </div>
    <button @click="my_click">點擊換色</button>

</div>
<script>
    const app = new Vue({
        el: '#app',
        methods:{
            my_click:function () {
                this.$refs.box.style.color='red'
            }
        }
    })
</script>
</body>
</html>

獲取DOM

組件

1,全局註冊,是一個方法,element-ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <zl></zl>
</div>
<div id="app2">
    <zl></zl>
</div>
<script>
    //zl是組件名,後面跟組件內容,
    Vue.component('zl',{
        template:`<div><h1>這是全局組件</h1></div>`,
    })
    const app = new Vue({
        el: '#app',
    })
    const app2=new Vue({
        el:'#app2'
    })
</script>
</body>
</html>

全局組件,

2,局部註冊,須要註冊到vue的示例對象裏,數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<dlh></dlh>
</div>
<script>
    //此處定義的是一個變量,template 是一個對象,
    let xuyang={
        template:  `<div><h1>這是局部註冊</h1></div>`
    }
    const app = new Vue({
        el: '#app',
        components:{
            //dlh是組件名稱,xuyang是配置內容,
            dlh:xuyang,
        }
    })
</script>
</body>
</html>

局部註冊

組件之間的通訊,組件是vue的實例,

在父組件裏註冊子組件,app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<dlh></dlh>
</div>
<script>
    //此處定義的是一個變量,template 是一個對象,
    let xuyang={
        template:  `<div>
        <h1>{{name}}</h1>
        <button @click="my_click">點擊</button>
        </div>`,
        data:function () {
            return{
                name:'渣渣輝'
            }
        },
        methods:{
            my_click:function () {
                alert(222)
            }
        }
    }
    const app = new Vue({
        el: '#app',
        //注意,這裏是components,是加S 的,
        components:{
            //dlh是組件名稱,xuyang是配置內容,
            dlh:xuyang,
        }
    })
</script>
</body>
</html>

父組件裏註冊子組件,

父子通訊

在子組件裏,用props接收父組件傳過來的數據,ide

父組件裏,給子組件綁定屬性,函數

<child :money="num"></child> //給子組件綁定屬性,傳數據,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<script>
    let child={
        template:`<div>
                        <h2>這是子組件</h2>
                        <p>父組件給的數據{{money}}</p>
                   </div>`,
        //用props接收父組件傳過來的數據,
        props:['money']
    };
    let father={
        template:`<div>
                <h1>這是父組件</h1>

                <child :money="num"></child> //給子組件綁定屬性,傳數據,
                </div>`,
        data:function () {
            return{
                num:100,
            }
        },
        //必定要注意,這裏是加S的
        components:{
            //在父組件註冊子組件,
            child:child
        }
    }
    const app = new Vue({
        el: '#app',
        components:{
            father:father
        }
    })
</script>
</body>
</html>

父子通訊

app.$on(event, callback) 監聽當前實例上的自定義事件，事件由$emit觸發，回調函數接收事件觸發器額外參數。

app.$emit(event, [args....]) 觸發當前實例上的事件，額外參數傳給監聽器的callback回調函數。

子父通訊

子組件提交事件,父組件接收事件,

實例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<script>
    let child={
        template:`<div>
                        <h2>這是子組件</h2>
                        <button @click="my_click">點擊給父組件發信息</button>
                   </div>`,
        methods:{
            my_click:function () {
                //提交事件
                this.$emit('son_say','請求父組件給內容');
            }
        }
    };
    let father={
        template:`<div>
                <h1>這是父組件</h1>
                <child @son_say="my_son_say"></child>
                <p>xx,子組件說{{mes}}</p>
                </div>`,

        //必定要注意,這裏是加S的
        components:{
            //在父組件註冊子組件,
            child:child
        },
        data(){
            return{
                mes:''
            }

        },
        methods:{
            my_son_say:function (data) {
                console.log(data)
                this.mes=data;
            }
        }
    };
    const app = new Vue({
        el: '#app',
        components:{
            father:father
        }
    })
</script>
</body>
</html>

子父通訊

非父子通訊

實例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <jia></jia>
    <yi></yi>
</div>
<script>
    //此處的丙是中間調度器,是一個實例化的vue對象
    let bing=new Vue();

    let jia={
        template:`<div>
                        <h1>這是甲</h1>
                        <button @click="my_click">點擊給乙發消息</button>
                   </div>`,
        methods:{
            my_click:function () {
                //給中間調度器提交事件,
                bing.$emit('today','今晚開黑')
            }
        }
    };
    let yi={
        template:`<div>
                       <h1>這是乙</h1>
                       <p>甲對我說{{say}}</p>
                    </div>`,
        //組件加載完成後去作的一些事情,
        data(){
            return{
                say:''
            }
        },
        mounted(){
            let that=this;//注意this的問題,由調度器的this轉變爲乙的,
            //監聽事件,跟回調函數
            bing.$on('today',function (data) {
                that.say=data;
            })
        }
    };
    const app = new Vue({
        el: '#app',
        components:{
            jia:jia,
            yi:yi,
        }
    })
</script>
</body>
</html>

非父子通訊

混合

重複功能和數據的儲存器，能夠覆蓋Mixins的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <com_1></com_1>
    <com_2></com_2>
</div>
<script>
    let base = {
        data() {
            return {
                is_show: false
            }
        },
        methods: {
            show: function () {
                this.is_show = true
            },
            hide: function () {
                this.is_show = false
            }
        }
    };
    let com_1 = {
        template: `<div>
                        <h1 v-show="is_show">這是第一個組件</h1>
                        <button @click="show">點擊顯示</button>
                        <button @click="hide">點擊隱藏</button>
                    </div>`,
        mixins:[base]


    };
    let com_2 = {
        template: `<div>
                         <h1 v-show="is_show">這是第二個組件</h1>
                         <button @mouseenter="show" @mouseleave="hide">鼠標移入顯示移除隱藏</button>
                    </div>`,
        mixins:[base]
    };
    const app = new Vue({
        el: '#app',
        components: {
            com_1: com_1,
            com_2: com_2,
        }
    })
</script>
</body>
</html>

base-mixins

插槽

插槽是一套內容分發的API，在組件中，<slot>做爲內容承載分發的出口

路由

每一個template只能識別一個做用域塊,因此須要用div進行包裹,

路由的註冊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--router-link是用來點擊跳轉的,to後面跟的是路由,-->
    <router-link to="/">首頁</router-link>
    <router-link to="/login">登陸</router-link>

    <!--顯示組件內容的區域,-->
    <router-view></router-view>
</div>
<script>
    //定義一個變量叫url(變量名字隨意,一個數組變量),url對應一個規則,對應一個數組,數組裏麪包含若干對象,
    let url=[
        {
            path:'/',//path表明路由,/表明home
            component:{
                template:`<div><h1>這是首頁</h1></div>`
            }
        },
        {
            path:'/login',//path表明路由,
            component:{
                template:`<div><h1>這是登陸頁面</h1></div>`
            }
        },
    ];
    //實例化一個VueRouter對象,
    let my_router=new VueRouter({
        routes:url,
    });
    const app = new Vue({
        el: '#app',
        router:my_router,
    })
</script>
</body>
</html>

路由的註冊,

<router-link to="/">首頁</router-link>  to後能夠跟反向解析的name的值,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--router-link是用來點擊跳轉的,to後面跟的是路由,-->
    <!--<router-link to="/">首頁</router-link>-->
    <!--<router-link to="/login">登陸</router-link>-->

    <!--同上面的代碼是等價的,經過命名進行反向解析,-->
    <router-link :to="{name:'home'}">首頁</router-link>
    <router-link :to="{name:'login'}">登陸</router-link>
    <router-link to="/alex?age=73">用戶頁面</router-link>

    <!--顯示組件內容的區域,-->
    <router-view></router-view>
</div>
<script>
    //定義一個變量叫url(變量名字隨意,一個數組變量),url對應一個規則,對應一個數組,數組裏麪包含若干對象,
    let url=[
        {
            path:'/',//path表明路由,/表明home
            name:'home',
            component:{
                template:`<div><h1>這是首頁</h1></div>`
            }
        },
        {
            path:'/login',//path表明路由,
            name:'login',
            component:{
                template:`<div><h1>這是登陸頁面</h1></div>`
            }
        },
        {
            path:"/:username",//path表明路由,
            name:'user',
            component:{
                template:`<div>
                                <h1>這是用戶頁面</h1>
                                <p>用戶名{{$route.params.username}}</p>
                                <p>年齡{{$route.query.age}}</p>
                           </div>`,
            }
        },
    ];
    //實例化一個VueRouter對象,
    let my_router=new VueRouter({
        routes:url,
    });
    const app = new Vue({
        el: '#app',
        router:my_router,
        mounted(){
            //$route 路由的所有信息
            console.log(this.$route);

            console.log(this.$router)
        }
    })
</script>
</body>
</html>

路由的註冊,

子路由的註冊,以及重定向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link :to="{name:'home'}">首頁</router-link>
    <router-view></router-view>
</div>
<script>
    let routes=[
        {
            path:'/',
            name:'home',
            redirect:'/xxx',
            component:{
                template:`<div>
                                <h1>這是首頁</h1>
                                <router-link to="xxx">xxx</router-link>
                                <router-link to="yyyy">yyyy</router-link>
                                <router-view></router-view>
                            </div>`
            },
            children:[
                {
                    path:'xxx',
                    component:{
                        template:`<div><h1>這是xxx</h1></div>`
                    }
                },
                {
                    path:'yyyy',
                    component:{
                        template:`<div><h1>這是yyy</h1></div>`
                    }
                }

            ]
        }
    ];
    let router=new VueRouter({
        routes:routes
    });
    const app = new Vue({
        el: '#app',
        router:router,
    })
</script>
</body>
</html>

子路由註冊,以及重定向

相關標籤/搜索

每日一句

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