Vuejs单文件组件十二

最新推荐文章于 2024-06-15 14:41:39 发布

米白蓝

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量80

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124272871

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

// app Vue组件
<template>
  <div>
    <School></School>
  </div>
</template>

<script>
import  School from './School.vue'
export default {
name: 'App',
components: {
  School
}
}
</script>

//入口文件
import App from './App.vue'
new Vue({
  el: '#root',
  components: {
    App
  }
})

<!-- html主文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单文件组件</title>
</head>
<body>
  <div id="root">
    <App></App>
  </div>
  <script src="../../js/vue.js"></script>
  <script src="./main.js"></script>
</body>
</html>

Vuecomponent构造函数：
- 我们创建的组件本质上是一个Vuecomponent的构造函数，且不是程序员定义的，是vue.extend生成是；
- 当我们写<组件名></组件名>时，vue解析的时候会帮我们创建这个组件的实例对象，就是new Vuecomponent(options)，参数就是我们的组件配置；
- 每次调用Vue.extend，vue在这个函数中就定义了一个VueComponent函数，然后进行返回，因此，每次调用Vue.extend时，都会返回一个全新的VueComponent；
- 组件的this指向：里面的（data，methods，watch，computed）指向都是VueComponent实例对象（vc，里面和vm是一样的）；
- 在vm中注册的组件可以在vm的$ children中看到；组件中嵌套的组件可以在vc中的$ dhildren中可以看到；
一个重要的内置关系：
- vc和vm是存在区别的，虽然大部分是相同的（会进行复印），但是，组件中data需要写函数形式，并且不能存在el；
- Vue的prototype和vue实例上的 __ proto __ 指向vue的原型对象，然后它上面的 __ proto __ 子项object的原型对象；
- VueComponent的prototype和VueComponent实例上的 __ proto __ 指向VueComponent的原型对象，里应该（它上面的 __ proto __ 又指向object的原型对象），但是vue中做了一件事，让它上面的 __ proto __ 指向了vue的原型对象，这样查找属性和方法的时候，组件Vuecomponent也可以查找vue上的内容；组件实例对象可以访问vue上的属性和方法；
vue单文件组件：
- 创建.vue文件，里面有三个标签template（结构）script（交互）style（样式）

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs单文件组件十二

// app Vue组件<template> <div> <School></School> </div></template><script>import School from './School.vue'export default {name: 'App',components: { School}}</script>//入口文件import App fr
复制链接

扫一扫