自學Vue的第04天

Koko君發表於2019-06-07
Vue

自學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>
複製程式碼

1、這裡的註冊區域性元件的時候，沒有使用鍵值對，預設k-v相等

2、這裡的建立區域性元件的時候，其實用了個語法糖，完整的寫法其實是

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 {}
        }
    })
複製程式碼

全域性元件，使用的時候無需宣告

完整程式碼

<!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

自學Vue的第04天


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>是不會被渲染的

slot還可以指定名稱

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獲取到父元件的資訊

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

元件的通訊

  • 父子元件通訊

自學Vue的第04天


  • 非父子元件通訊

自學Vue的第04天


父傳子

<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>
複製程式碼

自學Vue的第04天


子傳父

自學Vue的第04天


非父子元件

自學Vue的第04天


<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生命週期

自學Vue的第04天


相關文章