The first 04 days of self-Vue

Component-based development

Local assemblies

<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, the local time where the registration assembly, without the use of key-value pairs, equal to the default kv

2, create a local assembly here when, in fact, used a syntactic sugar, complete wording is actually

var MyFooter = Vue.extend({
        template: `
                <div>我是MyFooter</div>
            `
    })
复制代码

Global Components

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 {}
        }
    })
复制代码

Global components, when used without having to declare

The complete code

<!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 slot, ref, parent

For example 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>
复制代码

If there is no parent component slot, so when in use <div>我是插槽内容</div>will not be rendered

slot can also specify the name

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>
复制代码

The contents of the specified name was rendered

$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

If the use of $refsthe obtained information sub-components,
we can use the $parentinformation obtained to the parent component

var Child = {
        template: `
            <div>我是子组件</slot></div>
        `,
        created:function(){
            console.log(this.$parent);
        }
    }
复制代码

Communication components

Parent-child communication components

Non-parent-child communication components

Father to son

<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>
复制代码

Parent child transmission

Non-Sons components

<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>
复制代码