vue组件

司篂篂

已于 2023-10-12 21:57:42 修改

阅读量92

点赞数

文章标签： vue.js 前端 javascript

于 2023-10-11 14:57:31 首次发布

本文链接：https://blog.youkuaiyun.com/jkjkikik/article/details/133670904

版权

组件定义的三大步骤：

一：定义组件

二：注册组件

三：使用组件（写组件标签）

一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：
<school></school>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- 第三步：编写组件标签 -->
    <school></school>
    <!-- 第三步：编写组件标签 -->
    <hr>
    <people></people>
  </div>
  <script type="text/javascript">
   

    // 第一步：创建组件
    const school = Vue.extend({
      // 只有new的时候才可以传入el配置项
      // 组件里面的容器
      template: `
<div>
  <h2>
    学校：{{name}}
    地址：{{address}}
    <button @click="showt">点我显示学校名</button>
    </h2>
  </div>
`,
// 组件里面data只能用函数式,不能用对象式
      data () {
        return {
          name: 'sgg',
          address: 'bj'
        }
      },
      methods: {
        showt () {
          alert(this.name)
        }
      },
      
    })
    // 第一步创建组件
    const people = Vue.extend({
      template: `
      <div>
        <h2>
          学校：{{pdsu}}
          <button @click='config'>点我展示学校名字</button>
          </h2>
        </div>
      `,
      data () {
        return{ pdsu: 'ppddssuu'}
       
      },
      methods: {
        config () {
          alert(this.pdsu)
        }
      },
         
    })
    // 全局注册
    // 第二步注册组件
    // Vue.component('people', people)
    //  第二步：注册组件（全局注册和局部注册）
    // Vue.component('school', school)


    // 局部注册
    new Vue({
      el: '#root',
      components: {
        school, people
      }
    })
  
  </script>

</body>

</html>

组件的几个注意点：

一个单词组成：首字母小写或者首字母大写
多个单词组成：kebab-case：中间有小横杠 CamelCase：驼峰命名（需要vue脚手架支持）
组件名应该尽量回避html中的已有元素名称，否则会报错
可以用name配置项来制定组件在开发者工具中呈现的名字，注意这里不是改变组件的名字，而是改变开发者工具中呈现的名字。组件的名字还是注册的时候哪个名字。
注册组件的时候有一个简写的形式就是可以直接写option配置项，不用在Vue.extend了。但是编译的时候，vue会自己来执行那一步，所以我们写不写都行。

vuecomponent:

组件本来就是一个名为component的构造函数，而且不是程序员定义的，是vue.extend生成的。

我们只需要在容器里面写标签，vue解析的时候就会帮我们创建school组件的实例对象。

特别需要注意的是：每次调用vue.extend，返回的都是一个全新的VueComponent

关于this指向

组件配置中是vuecompnent实例对象（组件实例对象）。

new Vue中是vm（vue实例对象）

下面是源码：

一个重要的内置关系（原型）

构造函数对应的是显性原型。

实例对象对应的是隐性原型

内置关系如图

构造函数vue的prototype（显式原型）指向的是vue的原型对象

vue的实例对象的__proto__（隐式原型）指向的是vue的原型对象

vue的原型对象指向的是object的原型对象，object的原型对象指向null

构造函数vuecomponent的prototype指向的是vuecomponent的原型对象。

构造函数vuecomponent的实例对象的__proto__指向的是vuecomponent的原型对象。

vuecomponent的原型对象原本指向的是object的原型对象，但是vue源码中做了改动，让vuecomponent的原型对象的__proto__指向了vue的原型对象。

单文件组件

单文件组件分为好几个文件

main.js用来写new Vue里面的交互。

index.html用来写new里面指定的容器。

注意组件里面还有一个APP组件（大哥组件）

创建vue脚手架

具体步骤：

全局安装@vue/cli(命令：npm install -g @vue/li)，如果下载缓慢就先配置淘宝镜像:npm config set registry https://registry.npm.taobao.org

切换到你要创建项目的目录，然后使用命令创建项目（vue create xxx）

启动项目（npm run serve）

vue的ref标签属性：

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

props配置项：

用于从父组件向子组件传递数据的机制。通过使用props，父组件可以将数据传递给子组件，并在子组件中使用这些数据。

为了在Vue组件中使用props，你需要在子组件的声明中定义props选项。这些选项可以是一个数组或一个对象，其中每个元素表示要接收的prop的名称。

插件

功能：让组件（子组件）接收外部（父组件）传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)
功能：可以把多个组件共用的配置提取成一个混入对象
写一个js文件，将全局都需要的交互代码写进去，然后在需要的组件里面引入这个混合文件。
使用方式：

第一步定义混合：
就是编写那个写混合代码的js文件。
第二步使用混入：
全局混入：Vue.mixin(xxx) 局部混入：mixins:['xxx']
功能：用于增强Vue
写法：<style scoped>
- 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

使用插件：

插件里面第一个参数是vue，这就代表插件里面可以写很多关于vue相关的配置，这样子如果写了一个强力的插件的话，后面在组件里面就可以直接引入然后应用了。

scoped样式

作用：让样式在局部生效，防止冲突。