父子组件通讯

VSCode 插件推荐

• Volar（Vue3 推荐，Vue2推荐Vetur）

  注意，可以在 Extensions 中配置自动导入，根据习惯启用或禁止

• Vue VSCode Snippets（依赖Vetur！！！）

父传子—props

props 的值有两种方式：

字符串数组

数组中的字符串就是传递时的名称

对象

对象可以设置传递时的类型（有类型限制），默认值等。推荐

• type 可以是下列原生构造函数中的一个：
  • String
  • Number
  • Boolean
  • Array，注意！
  • Object，注意！
  • Date
  • Function
  • Symbol
• type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认

注意：

• 对象或数组默认值必须从一个工厂函数获取

• Prop 的大小写命名 (camelCase vs kebab-case)

  • HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
  • 如果使用字符串模板，那么这个限制就不存在了。实际采用 Vue-Loader 不会有该问题，只会出现在script引入的项目中

传入一个对象的所有 property 🔥

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

非Prop的Attribute

什么是非Prop的Attribute呢?

• 当我们传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为 非Prop的 Attribute
• 常见的包括class、style、id属性等

Attribute继承

• 当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中

禁用Attribute继承和多根节点，禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素

• 在组件中设置 inheritAttrs: false

  export default {
      inheritAttrs: false,
      props: { }
  }
  

• 可以通过 $attrs来访问所有的非props的attribute

  多个根节点的attribute如果没有显示的绑定，那么会报警告，我们必须手动的指定要绑定到哪一个属性上

  <h2 :id="$attrs.id">MultiRootElement</h2>
  

子传父—$emit

使用

• 在子组件中，通过$emit('自定义事件名'[,params])发送自定义事件，来触发子组件上绑定的自定义事件
• 在父组件中，通过v-on来监听子组件的自定义事件，绑定到父组件的方法中

自定义事件的参数

this.$emit("add", 10);

对传递的参数进行验证

在vue3当中，我们可以对传递的参数进行验证

// emits: ["add", "sub", "addN"],
// 对象写法的目的是为了进行参数的验证
emits: {
  add: null,
  sub: null,
  addN: (num, name, age) => {
    console.log(num, name, age);
    if (num > 10) {
      return true
    }
    return false;
  }
},

父子组件的访问—$refs等 🔥

基本上只有 $refs会使用，其他的基本不使用

父访问子— $refs 🔥

组件实例有一个$refs属性，是一个对象Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例

注意：在Vue3中已经移除了$children的属性！！！

子访问父—$parent & $root

• 通过$parent来访问父元素
• 通过$root来访问根组件