export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

  
    
    Click me
  

  
    在这里做一些不同的事情
  

watch {
  '$route.query.id'() {
    // ...
  }
}

const $slots = {
  default: ,
  icon: ,
  button: ,
};

$slots = { second:  }

  
这是一个非常棒的组件
  
    
  
  Click me!

  
这是一个非常棒的组件
  Click me!

export default {
  mounted() {
    // 当事情发生变化时调用`update`
    const observer = new MutationObserver(this.update);

    // 观察这个组件的变化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

  .component {
    background: green;
  }

  /*范围限定于此特定组件*/
  .component {
    background: green;
  }

/* 覆盖子组件的 CSS，同时保持样式范围*/
.my-component >>> .child-component {
  font-size: 24px;
}

  Mustard
  Ketchup
  
    Relish
  

2. 配置

有时需要根据应用程序其余部分的情况更改组件的行为。这样做通常是为了自动处理边缘情况，否则会很麻烦。Popup或者Tooltip应该重新定位自己，这样它就不会溢出页面。但是，如果该组件位于 modal 内部，则它应该重新定位自身，以免溢出modal。如果Tooltip知道它何时在模态内，这可以自动完成。

3. 造型

当你创建了上下文感知 CSS，根据父元素或兄弟元素中发生的情况应用不同的样式。

.statistic {
  color: black;
  font-size: 24px;
  font-weight: bold;
}

/* 在彼此相邻的统计数据之间进行一些分离*/
.statistic + .statistic {
  margin-left: 10px;
}

CSS 中变量让我们更进一步允许我们在页面的不同部分设置不同的值。

11. 如何使在 Vue 之外创建的变量具有响应性？

如果你从 Vue 外部获得一个变量，那么能够使其具有响应性就很好。这样你就可以在计算道具、观察者和其他任何地方使用它，它就像 Vue 中的任何其他状态一样工作。

当你正在使用 options API，你只需将它放在data组件的部分中：

const externalVariable = getValue();

export default {
  data() {
    return {
      reactiveVariable: externalVariable,
    };
  }
};

当你在 Vue 3 中使用组合 API，则可以使用ref或reactive这样：

import { ref } from 'vue';

// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);

// 使用 .value 访问
console.log(reactiveVariable.value);

使用reactive来代替：

import { reactive } from 'vue';

// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
// Reactive 仅适用于对象和数组
const anotherReactiveVariable = reactive(externalVariable);

// 直接访问
console.log(anotherReactiveVariable);

如果你仍在使用 Vue 2（就像我们中的许多人一样），你可以使用observable而不是reactive获得完全相同的结果。

12. 在 v-for 中解构

你知道你可以在 v-for 中解构吗？

  {{ name }}

众所周知，你可以使用这样的元组从 v-for 中获取索引：

  {{ index + 1 }} - {{ value }}

使用对象时，你还可以抓住key：

  {{ key }}: {{ value }}

也可以结合这两种方法，获取属性的键和索引：

  #{{ index + 1 }}. {{ key }}: {{ value }}

13. 在 Vue 中循环一个范围

v-for指令允许我们遍历一个数组，但它也让我们遍历一个范围：

显示效果：

• 项目#1

• 项目#2

• 项目#3

• 项目#4

• 项目#5

当我们使用v-for范围时，它将从 1 开始并以我们指定的数字结束。

14. 观察组件中的任何内容

你的组件中的任何响应都可以被观察到：

export default {
  computed: {
    someComputedProperty() {
      // 更新计算道具
    },
  },
  watch: {
    someComputedProperty() {
      // 当计算的 prop 更新时做一些事情
    }
  }
};

你可以看：

• 计算道具

• 道具

• 嵌套值

如果你使用组合 API，只要它是一个ref或reactive对象就可以监视任何值，。

15. 窃取道具类型

从子组件复制 prop 类型，只是为了在父组件中使用它们。但窃取这些道具类型比只是复制它们要好得多。

例如，我们Icon在这个组件中使用了一个组件：

为了让它工作，我们需要添加正确的道具类型，从Icon组件中复制：\

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,
    },
  },
};

当Icon组件的 prop 类型更新时，你肯定你会忘记回到这个组件并更新它们。随着时间的推移，随着该组件的 prop 类型开始偏离组件中的 prop 类型，将引入错误Icon。

所以这就是为什么我们会窃取它们：

import Icon from './Icon';
export default {
  components: { Icon },
  props: {
    ...Icon.props,
    heading: {
      type: String,
      required: true,
    },
  },
};

除了在我们的示例中，我们在每个道具名称的开头添加了“icon”。所以我们必须做一些额外的工作来实现这一点：

import Icon from './Icon';

const iconProps = {};

// Do some processing beforehand
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val;
});

export default {
  components: { Icon },
  props: {
    ...iconProps,
    heading: {
      type: String,
      required: true,
    },
  },
};

现在，如果Icon组件中的 prop 类型被修改，我们的组件将保持最新。

但是如果在Icon组件中添加或删除了一个 prop 类型呢？为了涵盖这些情况，我们可以使用v-bind计算道具来保持动态。

16. 检测元素外部（或内部）的点击

有时我们需要检测点击是发生在特定元素el的内部还是外部。这是我们通常使用的方法：

window.addEventListener('mousedown', e => {
  // 获取被点击的元素
  const clickedEl = e.target;

  // `el` 是你正在检测外部点击的元素
  if (el.contains(clickedEl)) {
    // 单击“el”内部
  } else {
    // 在`el`之外点击
  }
});

17. 递归槽

我们是否可以v-for只使用模板来制作一个组件？在此过程中，我发现了如何递归地使用slot。

这是组件的样子：

如果你想用作用域slot来做这件事——为什么不呢？！— 只需要进行一些调整：