### 彪哥

爱好前端

- 基础

- 组件

  - 使用组件的细节点
    - 解析 DOM 模板时的注意事项
    - 子组件内的data要使用函数返回
    - 通过 ref 引用操作DOM
  - 父组件给子组件传值
  - 子组件派发事件和值给父组件
  - Prop 验证 与 非 Prop 的 Attribute
  - 自定义事件
  - 兄弟组件传值
  - 非父子组件传值
  - 父组件调用子组件方法并传入值
  - 插槽slot
  - 动态组件与 v-once 指令
  - vue父子组件的生命周期顺序

- 过渡&动画

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

- 《Vue》笔记
- 组件

heBody
2020-02-13
目录

# 使用组件的细节点

# # 使用组件的细节点

## # 解析 DOM 模板时的注意事项

    <div id="root">
        <table>
            <tbody>
                <row></row>
                <row></row>
                <row></row>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        Vue.component('row', {
            template: '<tr><td>this is a row</td></tr>'
        })
        var vm = new Vue({
            el: '#root'
        })
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上面代码中，`row` 组件在渲染页面时，并不会把`tr`节点渲染到`tbody`里面，而是被提升到了和`table`同一个级别的地方。原因是在html编码规范中，`tbody`里面只能放`tr`，正确的做法是使用`tr`标签添加`is`属性等于组件名称`row` :

    <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
    </tbody>

1
2
3
4
5

同样，`ul>li`、`ol>li`、`select > option` 标签也要注意这样的问题。

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

- 字符串 (例如：`template: '...'`)
- 单文件组件 (`.vue`)
  (opens new window)
- `<script type="text/x-template">`
  (opens new window)

## # 子组件内的data要使用函数返回

    Vue.component('row', {
        data() {
            return {
                content: 'this is content'
            }
        },
        template: '<tr><td>{{content}}</td></tr>'
    })

1
2
3
4
5
6
7
8

之所以这样设计是因为子组件有可能会被调用多次，而每次调用时的data数据都应该是独立的。因此需要通过一个函数来实现，每个实例可以维护一份被返回对象的独立的拷贝。

这样才不会出现每个子组件数据相互影响的情况。

## # 通过 ref 引用操作DOM

ref
(opens new window)

虽然并不推荐我们在使用vue的时候操作DOM，但是某些情况下我们必须要操作DOM来实现一些功能，因此可以通过ref引用的形式来获取到DOM节点。

    <!-- `vm.$refs.p` 指向DOM元素节点 -->
    <p ref="p">hello</p>

    <!-- `vm.$refs.child` 指向组件实例 -->
    <child-component ref="child"></child-component>

1
2
3
4
5

`ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

组件实例对象 VueComponent

> 打开控制台，点击demo中的按钮可查看组件实例

See the Pen VwLeMoM by heBody (@heBody) on CodePen.

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
列表渲染之数组、对象更新检测
父组件给子组件传值

← 列表渲染之数组、对象更新检测 父组件给子组件传值→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式