自學Vue的第04天

時間 2019-12-05

標籤自學 vue 04天简体版

原文原文鏈接

自學Vue的第04天

組件化開發

局部組件

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

<script> <!-- 自定義局部組件--> var MyHeader = { template: ` <div>我是Header</div> ` } var MyBody = { template: ` <div>我是Body</div> ` } new Vue({ el: '#app', //註冊局部組件 components: { MyHeader, MyBody }, template: ` <div> <my-header></my-header> <my-body></my-body> </div> `, data: function () { return {} } }) </script>
複製代碼

一、這裏的註冊局部組件的時候，沒有使用鍵值對，默認k-v相等javascript

二、這裏的建立局部組件的時候，其實用了個語法糖，完整的寫法實際上是html

var MyFooter = Vue.extend({
        template: `
                <div>我是MyFooter</div>
            `
    })
複製代碼

全局組件

Vue.component('MyLow', {
        template: `
        <div>我是MyLow</div>
    `
    })
    
    new Vue({
        el: '#app',
        //註冊局部組件
        components: {
            MyHeader, MyBody, MyFooter
        },
        template: `
                <div>
                    <my-header></my-header>
                    <my-body></my-body>
                    <my-footer></my-footer>
                    <my-low></my-low>
                </div>
        `,
        data: function () {
            return {}
        }
    })
複製代碼

全局組件，使用的時候無需聲明vue

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組件化開發</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app"></div>

<script> <!-- 自定義局部組件--> var MyHeader = { template: ` <div>我是Header</div> ` } var MyBody = { template: ` <div>我是Body</div> ` } var MyFooter = Vue.extend({ template: ` <div>我是MyFooter</div> ` }) //全局組件 Vue.component('MyLow', { template: ` <div>我是MyLow</div> ` }) new Vue({ el: '#app', //註冊局部組件 components: { MyHeader, MyBody, MyFooter }, template: ` <div> <my-header></my-header> <my-body></my-body> <my-footer></my-footer> <my-low></my-low> </div> `, data: function () { return {} } }) </script>
</body>
</html>
複製代碼

slot插槽、ref、parent

slot舉例

<script> var Parent={ template: ` <div>我是父組件<slot></slot></div> ` } new Vue({ el: '#app', components:{ Parent }, template: ` <div> <parent> <div>我是插槽內容</div> </parent> </div> `, data: function () { return {} } }) </script>
複製代碼

若是父組件中沒有slot，那麼在使用的時候<div>我是插槽內容</div>是不會被渲染的java

slot還能夠指定名稱app

var Parent={
        template: `
            <div>我是父組件<slot name="hello"></slot></div>
        `
    }


    new Vue({
        el: '#app',
        components:{
            Parent
        },
        template: `
            <div>
                <parent>
                    <div>我是插槽內容</div>
                    <div slot="hello">我是插槽內容2</div>
                </parent>
            </div>
        `,
        data: function () {
            return {}
        }
    })
</script>
複製代碼

指定名稱的內容才進行渲染組件化

$ref

<script> var Child = { template: ` <div>我是子組件</div> ` } var Parent = { template: ` <div> 我是父組件 <!--爲子組件取名--> <child ref="childs"></child> </div> `, components: { Child }, mounted:function(){ <!--獲取到子組件的相關信息--> console.log(this.$refs.childs.$el); } } new Vue({ el: '#app', components: { Parent }, template: ` <div> <parent></parent> </div> `, data: function () { return {} } }) </script>
複製代碼

$parent

就好像使用$refs獲取到子組件的信息，
咱們能夠使用$parent獲取到父組件的信息this

var Child = {
        template: `
            <div>我是子組件</slot></div>
        `,
        created:function(){
            console.log(this.$parent);
        }
    }
複製代碼

組件的通信

父子組件通信

非父子組件通信

父傳子

<script> var Child = { //第三步：子組件使用父組件傳遞過來的數據 template: ` <div>我是子組件：{{sendChild}}</div> `, //第一步：子組件接收父組件參數的名稱 props:['sendChild'] } var Parent = { //第二步：經過特定名稱的屬性，傳遞數據給子組件 template: ` <div> 我是父組件 <child sendChild="父組件給的"></child> </div> `, components: { Child } } new Vue({ el: '#app', components: { Parent }, template: ` <div> <parent> </parent> </div> `, data: function () { return {} } }) </script>
複製代碼

子傳父

非父子組件

<script type="text/javascript"> Vue.prototype.$bus=new Vue() var MyHeader={ template:` <div> 我是頭部 {{ headermsg }} </div> `, data(){ return { headermsg:'我是頭部的信息' } }, created(){ // var self=this // self.$bus.$on('sending',function(val){ // self.headermsg=val // }) this.$bus.$on('sending',val=>{ this.headermsg=val }) } } var MyBody={ template:` <div>我是身體</div> `, } var MyFooter={ template:` <div>我是底部<button @click='sendhead'>我要跟頭部通訊</button></div> `, methods:{ sendhead(){ this.$bus.$emit('sending','我是底部的數據') } } } new Vue({ el:'#app', components:{ MyHeader, MyBody, MyFooter }, template:` <div> <my-header></my-header><hr> <my-body></my-body><hr> <my-footer></my-footer> </div> `, data(){ return {} }, }) </script>
複製代碼

Vue生命週期

相關標籤/搜索

每日一句

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