$root、$parent、$ref以及父组件方法共享——学习笔记

$root、$parent、$ref以及父组件方法共享_代码实例

<div id="app">
        <input type="text" ref="in">
        <heng ref="re"></heng>
        <div>父组件的摁妞</div>
        <button @click="way">父组件</button>
    </div>

 <script>
       var heng = {
           data:function(){
                return {
                    hengtest:'222'
                }
           },
           //子组件接收父组件的方法
           inject: ['way'],
           template:`
            <div>
                <div>子组件的摁妞</div>
               <button @click="way">子组件</button> 
            </div>
           `,
           created(){
            console.log(this.$root.test);
            console.log(this.$root.hengtest);
            console.log('parent',this.$parent.test);
           }
       }
        new Vue({
            el:'#app',
            data:{
              test:'11'
            },
            components:{
             heng
            },
            methods:{
               way:function(){
                    this.$refs.in.focus();
               }
            },
            mounted(){
                console.log(this.$root.test);
                console.log(this.$root.hengtest);
                console.log(this.$root.way);
                console.log('children',this.$refs.re.hengtest);
            },
            // 方法共享给子组件
            provide: function () {
                return {
                    way: this.way
                }
            }
        })

    </script>