Article
Vue组件的基本使用
00 分钟
2020-5-17
2023-5-21
type
status
category
date
slug
summary
tags
icon
Last edited time
May 21, 2023 07:57 AM

1、组件的使用

  1. 注册一个组件
    1. 调用

      2、局部注册组件

      局部组件只能在注册他的父组件中使用

      3、组件的注意事项

      1. data必须是一个函数
      1. 组件模板内容必须是单个根元素
        1. 可以使用div最外层,里面可以放多个标签
      1. 组件模板内容可以是模板字符串
      1. 组件命名方式
        1. 驼峰式驼峰式可以用在字符串模板中,但是如果作为普通的标签模板会出错HelloWord可以将其转化为短横线式->hello-world即可使用短横线式hello-world

      4、组件间数据交互

      1. 父组件向子组件传值
        1. 组件内部通过props接收传递过来的值
          父组件通过属性将值传递给子组件
          props属性名规则在 propse 中使用驼峰式,模板中需要使用短的形式字符串形式的模板中没有这个眼制
          props支持的数据类型字符串string数值number布尔值boolean数组Array对象Object
          小tips:
          如果父组件向子组件传数值的时候使用pnum=12则传递的是string类型
          如果使用的是:pnum='12'则是number类型的值,可以进行计算
          boolean也类似
      1. 子组件向父组件传值
        1. props传递数据原则单向数据流、父可以传递给子数据,不允许子组件直接操作props内容
          传递方式
        2. 子组件通过自定义事件向父组件传递信息
          1. 父组件监听子组件的事件
          1. 非父子组件间传值
            1. 单独的事件中心管理组件间的通信

          5、组件插槽

          1. 组件插槽的作用
            1. 父组件向子组件传递内容
          1. 组件插槽基本用法
            1. 插槽位置
              插槽内容
          1. 作用域插槽
            1. 父组件对子组件的内容进行加工处理

          评论