【无标题】

最新推荐文章于 2024-07-23 12:35:43 发布

一个菜鸟大学生

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量180

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/m0_68907098/article/details/127182296

版权

vue组件化原理

我们写的组件实际就是一个options对象，那么options又是什么呢？

options 顾名思义是选项的意思，或称为构造选项。是在创建 vue 实例时传入的参数，是一个对象。
const vm = new Vue(options)，该对象的具体可选属性有很多，具体可分为五大类，

api	选项
…	数据
…	dom
…	生命周期钩子
…	资源
…	组合

入门属性

el:el 属性又称挂载点，可认为是 element 的简写，创建一个 vue实例得知道是在哪一块元素上创建 Vue实例对哪一块视图进行操作。挂载点的定义有两种方式，mount 就是挂载的意思

1.设置el属性

new Vue({
  el: "#app",
})

data:data 属性又称内部数据，该属性值可以是对象，也可以是函数，但优先推荐使用函数，对象里的函数又称方法。并且若是组件中的 data 则必须使用函数。

2.设置data属性

2.1.使用对象

data:{
    n: 0
}

2.2.使用函数

data(){
    return{
      n: 0
    }
}

在写data属性的时候优先选择函数形式，在使用同一个 options 对象作为参数创建多个 Vue实例时，若 data 属性值为对象，在使用 new Vue(options) 创建 Vue实例时会将 options.data 属性值直接赋值给 Vue实例.data的属性，由于对象的赋值是复制的地址，因此多个实例的 data 属性值都是指向同一个对象的地址，则多个实例会共用一个 data对象，当一个实例改变 data对象时，另一个实例的 data对象也会被改变。

而当 data 属性值为函数时，Vue 创建实例时是会执行该 data() 函数，并将函数执行的结果返回的对象赋值给 Vue实例.data 属性，每次函数执行返回的对象都是不同的对象，因此多个实例的 data 属性值对应的是不同的对象，一个改变不会影响另外一个，各自独立不影响。

methods: 属性又称方法，属性值是一个对象，对象里面的属性都是函数，这些函数可以是事件处理的回调函数，也可以是普通函数。特点是每次页面渲染 methods 都会执行，如下：

2.设置methods属性

methods:{
    add(){
      this.n +=1
    }
}

components: 即组件的意思，也是基于模块化的概念设计的便于复用的 Vue实例

模块系统：通过将组件单独为一个 *.vue 文件，然后通过 import 导入并引用

import ComponentA from  './ComponentA.vue'
new Vue({ 
    el: '#app',
    components:{
        ComponentA: ComponentA
    }
})

props:又称外部数据，一般用于组件中接受外来传递的数据，在组件使用时，通过标签全局属性的方式进行传参

props原理

首先要明白props是相对于组件来说的，生成组件虚拟dom时会增加一个属性叫propsData存放用户传递的数据，在初始化过程中会进行属性的初始化操作。会用用户编写的props和propsData进行检测（进行校验validateprop）最终将属性存放到props上。并使用proxy方法进行代理，将其代理到实例上。

props的工作流程

上代码演示

<div id="app" >
    <testb :child-name="parentName" ></testb>
</div>

new Vue({    
    el:"#app",            
    components:{        
        testb:{            
            props:{                
                childName:""
            },            
        template: '<p>父组件传入的 props 的值 {{childName}}</p>',
        }
    },
    data(){        
        return {            
            parentName:"我是父组件"
        }
    },
})

1、props 传值的设置

根据上面的场景设置，testb 是一个子组件，接收一个 props（child-name）

然后根组件 A 把自身的 parentName 绑定到子组件的属性 child-name 上

2、props 父传子前

父组件的模板会被解析成一个模板渲染函数

3、props 开始赋值

之后，模板函数会被执行，执行时会绑定父组件为作用域

所以渲染函数内部所有的变量，都会从父组件对象上去获取

绑定了父作用域之后， parentName 自然会从父组件获取

4、子组件保存 props

子组件拿到父组件赋值过后的 attr

而 attrs 包含普通属性和 props，所以需要筛选出 props，然后保存起来

5、子组件设置响应式 props

props 会被保存到实例的_props 中，并且会逐一复制到实例上，并且每一个属性会被设置为响应式的

组件怎么读取 props

子组件保存了父组件传入的数据

prop 的数据会被逐一复制到 vm对象上（子组件的实例 this）上

但是复制的时候，会对每个属性，同时设置 get 和 set 函数，进行访问转接和赋值转接

组件通信

props:用来连接父组件和子组件之间的桥梁，用来接收父组件传递给子组件的数据，仅仅只能接收父组件传来的数据，却无法修改，props是单向绑定的，只能（父——>子）
注意* 父组件向子组件传递数据时，需要在父组件的组件上添加例如v-bind:visible=“visible”,这样的绑定事件，才能建立起父组件与props属性之间的联系
1.（父传子）

<modal:visible.sync="visible">
//<modal:visilble="visible" @update:visible>

2.(子接收)

props:{
    visible:{
         type:Boolean,
         default:false,
    }
}

3.（子使用）

templete:`<div class="modal" v-if="visible">`

4.（子传父）

<button class="close"@click="$emit('update:visible',false)"></button>

$e mi t : 用于子组件调用父组件的方法并传递数据给父组件；子组件可以使用 “$ emit”触发父组件的自定义事件，触发事件后附加参数都会传给监听器回调，语法为“vm.$emit (事件, arg)
1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit(event,arg)//触发当前实例上的事件
vm.$on(event,fn)//监听event事件后运行fn

watch:{
    count:{
      handler(){
      this.$emit("input",this.count)
      }
    }
}

5.（父监听）

<modal:visible.sync="visible">
//<modal :visible="visible"@update:visible="visible=$event">