【Vue】基础系列（十八）vuecomponent - 一个重要的内置关系

🌕写在前面
🍊博客主页 ：勇敢link牛牛 🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创
📆首发时间：🌹2022年4月4日🌹
🆕最新更新时间：🎄2022年4月4日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚​​《Vue2》​​

文章目录

一个重要的内置关系：

1.VueComponent.prototype.proto === Vue.prototype

2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>一个重要的内置关系</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      <school></school>
    </div>
  </body>

  <script type="text/javascript">.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.prototype.x = 99

    //定义school组件
    const school = Vue.extend({
      name:'school',
      template:`
        <div>
          <h2>学校名称：{{name}}</h2>  
          <h2>学校地址：{{address}}</h2> 
          <button @click="showX">点我输出x</button>
        </div>
      `,
      data(){
        return {
          name:'尚硅谷',
          address:'北京'
        }
      },
      methods: {
        showX(){
          console.log(this.x)
        }
      },
    })

    //创建一个vm
    const vm = new Vue({
      el:'#root',
      data:{
        msg:'你好'
      },
      components:{school}
    })

    
    //定义一个构造函数
    /* function Demo(){
      this.a = 1
      this.b = 2
    }
    //创建一个Demo的实例对象
    const d = new Demo()

    console.log(Demo.prototype) //显示原型属性

    console.log(d.__proto__) //隐式原型属性

    console.log(Demo.prototype === d.__proto__)

    //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99

    console.log('@',d) */</script>
</html>

关于VueComponent：

  • 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
  • 2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
  • 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
  • 4.关于this指向：
  • (1).组件配置中：
    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
  • (2).new Vue(options)配置中：
    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
  • 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
    Vue的实例对象，以后简称vm。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>VueComponent</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      <school></school>
      <hello></hello>
    </div>
  </body>

  <script type="text/javascript">.config.productionTip = false
    
    //定义school组件
    const school = Vue.extend({
      name:'school',
      template:`
        <div>
          <h2>学校名称：{{name}}</h2>  
          <h2>学校地址：{{address}}</h2> 
          <button @click="showName">点我提示学校名</button>
        </div>
      `,
      data(){
        return {
          name:'尚硅谷',
          address:'北京'
        }
      },
      methods: {
        showName(){
          console.log('showName',this)
        }
      },
    })

    const test = Vue.extend({
      template:`<span>atguigu</span>`
    })

    //定义hello组件
    const hello = Vue.extend({
      template:`
        <div>
          <h2>{{msg}}</h2>
          <test></test> 
        </div>
      `,
      data(){
        return {
          msg:'你好啊！'
        }
      },
      components:{test}
    })


    // console.log('@',school)
    // console.log('#',hello)

    //创建vm
    const vm = new Vue({
      el:'#root',
      components:{school,hello}
    })</script>
</html>