06provide组件通信.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="components-demo">
    <button-counter id="123"></button-counter>
</div>
<div id="app">
    {{ message }}
</div>

<script>
    //   function  person (){
    //     this.options='aaa'
    //   }
    //
    //   person.constructor={aa:'c'}
    //   person.prototype.options='span'
    //
    //   console.log(person.constructor.options)
    //  console.log(Object.create(person.constructor.options));
    //    new Vue({})
    var obj = {
        name: 'name',
        age: 29
    }
    var arr = []
    var res = new Array(obj.length);

    console.log(obj.length)
    console.log(res)
    console.log(arr.length)


    Vue.component('button-counter', {
        props:['id'],
        functional:true,
        inject: ['foo'],
        data: function () {
            return {
                count: 0
            }
        },
        mounted: ()=> { //挂载元素，获取到DOM节点
            console.log('==this.foo==')
            console.log(this.foo)

        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    new Vue({el: '#components-demo'})

    var app = new Vue({
        el: '#app',
        provide: {
            foo: 'bar'
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted: ()=> { //挂载元素，获取到DOM节点

           setTimeout(()=>{
                this.count=11;
                console.log('this.count='+this.count)
           },5000)
        },
        beforeUpdate(){

        },
        updated(){ //挂载元素，获取到DOM节点
        },
        beforeDestroy(){

        },
        destroyed(){

       },
        data: {
            count:0,
            message: 'Hello Vue!'
        }
    })
</script>

</body>
</html>