十分钟，让你学会Vue的这些巧妙冷技巧
作者：互联网
学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。
在用 Vue 开发的这几年里，我学到了很多有用的技巧。有些很取巧，有些几乎每天都在用，有些则更高级--但它们都很有用。
1. 将一个 prop 限制在一个类型的列表中 {#将一个-prop-限制在一个类型的列表中 data-id="heading-0"}
使用 prop 定义中的 validator 选项，可以将一个 prop 类型限制在一组特定的值中。
export default { name: 'Image', props: { src: { type: String, }, style: { type: String, validator: s => ['square', 'rounded'].includes(s) } } }; 复制代码 <button class="button" @click="$emit('click')"> <slot> <!-- Used if no slot is provided --> Click me </slot> </button> 复制代码 <template> <button class="button" @click="$emit('click')"> <slot> <div class="formatting"> {{ text }} </div> </slot> </button> </template> 复制代码 <!-- Uses default functionality of the component --> <ButtonWithExtensionPoint text="Formatted text" /> <ButtonWithExtensionPoint> <div class="different-formatting"> Do something a little different here </div> </ButtonWithExtensionPoint> 复制代码 watch { '$route.query.id'() { // ... } } 复制代码 <ComplicatedChart v-show="chartEnabled" /> 复制代码 <DataTable> <template #header="tableAttributes"> <TableHeader v-bind="tableAttributes" /> </template> </DataTable> 复制代码 <DataTable #header="tableAttributes"> <TableHeader v-bind="tableAttributes" /> </DataTable> 复制代码 const $slots = { default: <default slot>, icon: <icon slot>, button: <button slot>, }; 复制代码 <!-- Slots.vue --> <template> <div> <h2>Here are some slots</h2> <slot /> <slot name="second" /> <slot name="third" /> </div> </template> 复制代码 <template> <Slots> <template #second> This will be applied to the second slot. </template> </Slots> </template> 复制代码 $slots = { second: <vnode> } 复制代码 <template> <div> <h2>A wrapped slot</h2> <div v-if="$slots.default" class="styles"> <slot /> </div> </div> </template> 复制代码 <template> <div> <h2>This is a pretty great component, amirite?</h2> <div class="default-styling"> <slot > </div> <button @click="$emit('click')">Click me!</button> </div> </template> 复制代码 <div> <h2>This is a pretty great component, amirite?</h2> <div class="default-styling"> <!-- 槽中没有内容，但这个div 仍然被渲染。糟糕 --> </div> <button @click="$emit('click')">Click me!</button> </div> 复制代码 <!-- 可惜这个事件不存在 --> <slot @change="update" /> 复制代码 export default { mounted() { // 当有变化时调用`update` const observer = new MutationObserver(this.update); // 监听此组件的变化 observer.observe(this.$el, { childList: true, subtree: true }); } }; 复制代码 <style scoped> .component { background: green; } </style> 复制代码 <style> /* 全局 */ .component p { margin-bottom: 16px; } </style> <style scoped> /* 在该组件内有效 */ .component { background: green; } </style> 复制代码 <style scoped> .my-component >>> .child-component { font-size: 24px; } </style> 复制代码 <!-- 为简单起见，作为一个单一组件使用 --> <Dropdown v-model="selected" :options="[]" /> <!-- 分多个组件，更灵活 --> <Select v-model="selected"> <Option value="mustard">Mustard</Option> <Option value="ketchup">Ketchup</Option> <div class="relish-wrapper"> <Option value="relish">Relish</Option> </div> </Select> 复制代码 .statistic { color: black; font-size: 24px; font-weight: bold; } .statistic + .statistic { margin-left: 10px; } 复制代码 const externalVariable = getValue(); export default { data() { return { reactiveVariable: externalVariable, }; } }; 复制代码 import { ref } from 'vue'; // 可以完全在Vue组件之外完成 const externalVariable = getValue(); const reactiveVariable = ref(externalVariable); console.log(reactiveVariable.value); 复制代码 import { reactive } from 'vue'; // 可以完全在Vue组件之外完成 const externalVariable = getValue(); // reactive 只对对象和数组起作用 const anotherReactiveVariable = reactive(externalVariable); // Access directly console.log(anotherReactiveVariable); 复制代码 <li v-for="{ name, id } in users" :key="id" > {{ name }} </li> 复制代码 <li v-for="(movie, index) in [ 'Lion King', 'Frozen', 'The Princess Bride' ]"> {{ index + 1 }} - {{ movie }} </li> 复制代码 <li v-for="(value, key) in { name: 'Lion King', released: 2019, director: 'Jon Favreau', }"> {{ key }}: {{ value }} </li> 复制代码 <li v-for="(value, key, index) in { name: 'Lion King', released: 2019, director: 'Jon Favreau', }"> #{{ index + 1 }}. {{ key }}: {{ value }} </li> 复制代码 <template> <ul> <li v-for="n in 5">Item #{{ n }}</li> </ul> </template> 复制代码 Item #1 Item #2 Item #3 Item #4 Item #5 复制代码 export default { computed: { someComputedProperty() { // Update the computed prop }, }, watch: { someComputedProperty() { // Do something when the computed prop is updated } } }; 复制代码 <template> <div> <h2>{{ heading }}</h2> <Icon :type="iconType" :size="iconSize" :colour="iconColour" /> </div> </template> 复制代码 import Icon from './Icon'; export default { components: { Icon }, props: { iconType: { type: String, required: true, }, iconSize: { type: String, default: 'medium', validator: size => [ 'small', 'medium', 'large', 'x-large' ].includes(size), }, iconColour: { type: String, default: 'black', }, heading: { type: String, required: true, }, }, }; 复制代码 import Icon from './Icon'; export default { components: { Icon }, props: { ...Icon.props, heading: { type: String, required: true, }, }, }; 复制代码 import Icon from './Icon'; const iconProps = {}; Object.entries(Icon.props).forEach((key, val) => { iconProps[`icon${key.toUpperCase()}`] = val; }); export default { components: { Icon }, props: { ...iconProps, heading: { type: String, required: true, }, }, }; 复制代码 window.addEventListener('mousedown', e => { // 获取被点击的元素 const clickedEl = e.target; if (el.contains(clickedEl)) { //在 "el "里面点击了 } else { //在 "el "外点击了 } }); 复制代码 <!-- VFor.vue --> <template> <div> <!-- 渲染第一项 --> {{ list[0] }} <!-- 如果我们有更多的项目，继续!但是不要使用我们刚刚渲染的项 --> <v-for v-if="list.length > 1" :list="list.slice(1)" /> </div> </template> 复制代码 <template> <div> <!-- Pass the item into the slot to be rendered --> <slot v-bind:item="list[0]"> <!-- Default --> {{ list[0] }} </slot> <v-for v-if="list.length > 1" :list="list.slice(1)" > <!-- Recursively pass down scoped slot --> <template v-slot="{ item }"> <slot v-bind:item="item" /> </template> </v-for> </div> </template> 复制代码 <template> <div> <!-- 常规列表 --> <v-for :list="list" /> <!-- 加粗的项目列表 --> <v-for :list="list"> <template v-slot="{ item }"> <strong>{{ item }}</strong> </template> </v-for> </div> </template> 复制代码 export default { name: 'LiveUsersWidget', //
标签：十分钟,Vue,插槽,代码,巧妙,复制,组件,data,heading 来源： https://www.cnblogs.com/tksd/p/16344679.html