评论

关于Vue组件知识的总结与梳理!! 适合对vue组件概念比较模糊或还不太了解的同学!!

关于Vue组件知识的总结与梳理!! 适合对vue组件概念比较模糊或还不太了解的同学!!

这是一篇关于vue组件内容的大概介绍和总结,希望对大家有用!
(还没更新到vue3)

组件

Vue 1.x中

全局组件:

  1. 创建组件构造器 调用Vue.extend
  2. 注册组件 调用Vue.component
  3. 使用组件

局部组件:

  1. 创建组件构造器
  2. 在vue实例内部定义属性components,然后 cpn使用的组件名:组件构造器
  3. 使用组件

Vue 2.x

直接在vue实例的components里

组件不能访问vue实例的数据

因此组件有自己的data数据集,而且必须用函数返回的形式定义

组件构造:

‘注册名称’:注册模板

而对于直接’注册名称’:注册模板 中写注册模板,会造成不美观,因此可以在外部定义组件格式

外部<template>定义,加上id,之后直接#id即可

父子组件间的通信:

  1. 通过props向子组件传递数据
  2. 通过$emit Events,即事件向父组件发送信息

props(父传子)

在子组件中定义props

props=[自定义变量名1,自定义变量名2],然后在该模板上设置属性,:自定义变量名=“父组件变量”

父组件

const app=new Vue({
    el:"#app",
    data:{
        message:"你好啊",
        movies:['海王','海贼王','海尔兄弟']
    },
    components:{
        cpn//定义子组件有cpn
    }
})

子组件

const cpn={
    template:'#cpn',//引用下面id为cpn的组件模板
    props:['cmovies','cmessage'],
    data(){
        return {}
    },
    methods:{}
}

html网页内容

<template id="cpn">//定义id为cpn的组件模板内容,即传给了上面的子组件模板格式
    <div>
    	<p>{{cmovies}}</p>
		<h2>{{cmessage}}</h2>
    </div>
</template>

//网页主体内容
<div id="app">
    <cpn :cmovies="movies" :cmessage="message"></cpn>//通过子组件中定义的props方法将父组件中的message和movies变量内容传给子组件的cmessage和cmovies
</div>

props也可以以对象形式存储//更推荐如此

type为类型,default为默认值,required要求是否一定要赋值

类型是对象或数组时,默认值必须是函数

$emit(子传父)

子组件methods中自定义事件

methods:{子组件自定义函数内部加一句 this.$emit(‘父组件中@的事件名’,值)}//提交的事件名不要大写

父组件中,通过v-on即@,来监听子组件事件

父子组件的相互访问

父组件访问子组件:使用$children、$refs

子组件访问父组件:使用$parent、$root

$children

this.$children是一个数组类型,包含所有子组件对象//一般不常用

$refs、$ref

ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。

例如给标签加上 ref=“one”

接下来便可如下调用 this.$refs.one 指到这个方法,之后再对该元素调用方法即可

$parent

如果访问到了root,则为Vue而不是Vue component//一般不推荐使用
然后通过 .属性或方法来进行操作

$root

直接访问根,即root,
然后通过 .属性或方法来进行操作

觉得该篇文章对你有帮助的请献上你们可爱的赞噢~

点赞 5
收藏
评论

3 个评论

  • TYXX
    TYXX
    2021-11-16

    好好好,蹲一波vue3

    2021-11-16
    赞同 5
    回复 1
    • Smooth
      Smooth
      2021-11-17
      哈哈哈好,vue3我还没系统梳理过
      2021-11-17
      1
      回复
  • Fan
    Fan
    2021-11-17

    整理很详细,受益匪浅

    2021-11-17
    赞同 2
    回复
  • 知非
    知非
    2021-11-16

    整理的好全面详细!有学到很多,赞~

    2021-11-16
    赞同 1
    回复 3
    • Smooth
      Smooth
      2021-11-17
      谢谢~
      2021-11-17
      2
      回复
    • 知非
      知非
      2021-11-17回复Smooth
      不客气,一起学习进步~
      2021-11-17
      1
      回复
    • Smooth
      Smooth
      2021-11-17回复知非
      冲冲冲
      2021-11-17
      2
      回复
登录 后发表内容