您现在的位置是：首页 >技术教程 >前端必知必会-Vue Fallthrough 属性网站首页技术教程

Vue Fallthrough 属性

可以使用未声明为 props 的属性来调用组件，这些属性将直接传递到组件中的根元素。

使用 fallthrough 属性，您可以从创建组件的父级获得更好的概览，并且它简化了我们的代码，因为我们不需要将属性声明为 prop。

用于 fallthrough 的典型属性是 class、style 和 v-on。

Fallthrough 属性

例如，从父级控制组件样式而不是将样式隐藏在组件内部会很好。

让我们创建一个新示例，即 Vue 中的一个基本待办事项列表，并查看 style 属性如何传递到表示待办事项的组件。

因此，我们的 App.vue 应该包含待办事项列表，以及一个 <input> 元素和一个 <button> 来添加新待办事项。每个列表项都是一个 <todo-item /> 组件。

App.vue:

<template>
  <h3>Todo List</h3>  
  <ul>
    <todo-item
      v-for="x in items"
      :key="x"
      :item-name="x"
    />
  </ul>
  <input v-model="newItem">
  <button @click="addItem">Add</button>
</template>

<script>
  export default {
    data() {
      return {
        newItem: '',
        items: ['Buy apples','Make pizza','Mow the lawn']
      };
    },
    methods: {
      addItem() {
        this.items.push(this.newItem),
        this.newItem = '';
      }
    }
  }
</script>

而 TodoItem.vue 只是接收了要做什么的描述作为 prop：

TodoItem.vue:

<template>
<li>{{ itemName }></li>
</template>

<script>
export default {
props: ['itemName']
}
</script>

为了正确构建我们的应用程序，我们还需要在 main.js 中进行正确的设置：

main.js:

import { createApp } from 'vue'
  
import App from './App.vue'
import TodoItem from './components/TodoItem.vue'

const app = createApp(App)
app.component('todo-item', TodoItem)
app.mount('#app')

属性可以传递到我们组件的 <template> 内的根元素，我们可以从中为列表项提供一些样式App.vue:

示例获取您自己的 Vue 服务器
我们从 App.vue 为组件内的 <li> 元素提供样式：

<template>
  <h3>Todo List</h3>
  <ul>
    <todo-item
      v-for="x in items"
      :key="x"
      :item-name="x"
      style="background-color: lightgreen;"
    />
  </ul>
  <input v-model="newItem">
  <button @click="addItem">Add</button>
</template>

要确认样式属性确实已失效，我们可以在浏览器中右键单击待办事项列表中的

• 元素，选择“检查”，然后我们可以看到样式属性现在位于
• 元素上：

• 合并“class”和“style”属性
  如果已设置“class”或“style”属性，并且“class”或“style”属性也来自父级作为失效属性，则将合并这些属性。

  示例
  除了父级的现有样式外，我们还为 TodoItem.vue 组件内的 <li> 元素添加了边距：

  <template>
  <li style="margin: 5px 0;">{{ itemName }></li>
  </template>
  
  <script>
  export default {
  props: ['itemName']
  }
  </script>
  

  如果我们在浏览器中右键单击 <li> 元素，我们可以看到属性已合并。边距直接设置在组件内的 <li> 元素上，并与从父级传下来的背景颜色合并：

  $attrs

  如果组件的根级别上有多个元素，则不再清楚属性应该传到哪个元素。

  要定义哪个根元素获得 fallthrough 属性，我们可以使用内置的 $attrs 对象标记该元素，如下所示：

  示例
  TodoItem.vue：

  <template>
  <div class="pinkBall"></div>
  <li v-bind="$attrs">{{ itemName }></li>
  <div class="pinkBall"></div>
  </template>
  

  ---

  总结

  本文介绍了Vue Fallthrough 属性的使用，如有问题欢迎私信和评论