vue组件注册 Vue.extend Vue.component Vue.use的使用 以及组件嵌套

/**
 *      vue.extend用法
 *      使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
 *      注意：此实例可以挂载到根实例之外  
 */

  const Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
        alias: 'Heisenberg'
      }
    }
  })
  // 创建 Profile 实例，并挂载到一个元素上。
  new Profile().$mount('#opp')


let navbar = {
    template: `<div class='nav'>
                    <input type="text" placeholder="请输入关键字"/>
               </div>`,   
    data:()=>{
        return {
        }
    },
    mounted() {
        console.log(this.$parent)
    }
};

const MyPlugin = {
    install:(vue, arguments)=>{
        console.log(arguments);
        vue.component('navbar', navbar);
    }
}


Vue.use(MyPlugin, {a:1, b:2});  // 组件注册成功




//  logo组件
Vue.component("logo", {
    template: `<div class='logo'>
                    <img v-bind:src="logoSrc">
               </div>`,
    inject: ['logoSrc'],      
    data:()=>{
        return {
        }
    },
    mounted() {
        console.log(this.$parent)
    }
})
// header组件  组件调用 provie inject传值
Vue.component("buttoncounter", {
    template: `<div class='header'>
                <logo></logo>
                {{header}}
                </div>`,
    provide:{
        logoSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582433251882&di=de459decf2e157552b97a4879ae4135d&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2Fadf89182.jpg'
    },
    data:()=>{
        return {
            header:'我是头部导航栏'
        }
    },
    mounted() {
        console.log(this.$parent)
    }
});

// vue根实例
let vm = new Vue({
    el:"#app",
    data:{
        name: 'Marry'
    },
    mounted(){
        console.log('vue根实例初始化完毕')
    }
})

console.log(vm);