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

<button class="button" @click="$emit('click')">
  <slot>
    <!-- 如果沒有提供slot則使用 -->
    Click me
  </slot>
</button>

<template>
  <button class="button" @click="$emit('click')">
    <!-- 一開始在 slot 標(biāo)簽中添加什么都不做 -->
    <!-- 我們可以通過向 slot 提供內(nèi)容來覆蓋它 -->
    <slot>
      <div class="formatting">
        {{ text }}
      </div>
    </slot>
  </button>
</template>

<!-- 使用組件的默認(rèn)功能 -->
<ButtonWithExtensionPoint text="Formatted text" />

<!-- 使用擴(kuò)展點(diǎn)創(chuàng)建自定義行為 -->
<ButtonWithExtensionPoint>
  <div class="different-formatting">
    在這里做一些不同的事情
  </div>
</ButtonWithExtensionPoint>

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

<ComplicatedChart v-show="chartEnabled" />

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

<!-- Slots.vue -->
<template>
  <div>
    <h2>這里是一些slots</h2>
    <slot />
    <slot name="second" />
    <slot name="third" />
  </div>
</template>

<template>
  <Slots>
    <template #second>
      這將應(yīng)用于第二個(gè)slot
    </template>
  </Slots>
</template>

$slots = { second: <vnode> }

<template>
  <div>
    <h2>一個(gè)包裹的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>這是一個(gè)非常棒的組件</h2>
  <div class="default-styling">
    <!-- slot中沒有內(nèi)容，但仍會(huì)呈現(xiàn)此 div-->
  </div>
  <button @click="$emit('click')">Click me!</button>
</div>

<div>
  <h2>這是一個(gè)非常棒的組件</h2>
  <button @click="$emit('click')">Click me!</button>
</div>

<!-- 可惜這個(gè)活動(dòng)不存在 -->
<slot @change="update" />

export default {
  mounted() {
    // 當(dāng)事情發(fā)生變化時(shí)調(diào)用`update`
    const observer = new MutationObserver(this.update);

    // 觀察這個(gè)組件的變化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

<style scoped>
  .component {
    background: green;
  }
</style>

<style>
  /*全局應(yīng)用*/
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /*范圍限定于此特定組件*/
  .component {
    background: green;
  }
</style>

<style scoped>
/* 覆蓋子組件的 CSS，同時(shí)保持樣式范圍*/
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

<!-- 為簡單起見用作單個(gè)組件 -->
<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;
}

/* 在彼此相鄰的統(tǒng)計(jì)數(shù)據(jù)之間進(jìn)行一些分離*/
.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);

// 使用 .value 訪問
console.log(reactiveVariable.value);

使用reactive來代替：\

import { reactive } from 'vue';

// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
// Reactive 僅適用于對(duì)象和數(shù)組
const anotherReactiveVariable = reactive(externalVariable);

// 直接訪問
console.log(anotherReactiveVariable);

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

<li v-for="(value, key) in [
  'Hai Yong',
  'Frozen',
  'Web Beginner'
]">
  {{ index + 1 }} - {{ value }}
</li>

<li v-for="(value, key) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  {{ key }}: {{ value }}
</li>

<li v-for="(value, key, index) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

<template>
  <ul>
    <li v-for="n in 5">項(xiàng)目#{{ n }}</li>
  </ul>
</template>

export default {
  computed: {
    someComputedProperty() {
      // 更新計(jì)算道具
    },
  },
  watch: {
    someComputedProperty() {
      // 當(dāng)計(jì)算的 prop 更新時(shí)做一些事情
    }
  }
};

<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 = {};

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

window.addEventListener('mousedown', e => {
  // 獲取被點(diǎn)擊的元素
  const clickedEl = e.target;

  // `el` 是你正在檢測外部點(diǎn)擊的元素
  if (el.contains(clickedEl)) {
    // 單擊“el”內(nèi)部
  } else {
    // 在`el`之外點(diǎn)擊
  }
});

<!-- VFor.vue -->
<template>
    <div>
        <!-- 渲染第一項(xiàng) -->
    {{ list[0] }}
        <!-- 如果我們有更多的項(xiàng)目可以繼續(xù)，但需要離開我們剛剛渲染的項(xiàng)目 -->
    <v-for
      v-if="list.length > 1"
            :list="list.slice(1)"
        />
    </div>
</template>

template>
  <div>
    <!-- 將項(xiàng)目傳遞到要渲染的slot中 -->
    <slot v-bind:item="list[0]">
      <!-- Default -->
      {{ list[0] }}
    </slot>

    <v-for
      v-if="list.length > 1"
      :list="list.slice(1)"
    >
      <!-- 遞歸向下傳遞作用域slot -->
      <template v-slot="{ item }">
        <slot v-bind:item="item" />
      </template>
    </v-for>
  </div>
</template>

<template>
  <div>
    <!-- 常規(guī)列表 -->
    <v-for :list="list" />

    <!-- 帶有粗體項(xiàng)目的列表 -->
    <v-for :list="list">
      <template v-slot="{ item }">
        <strong>{{ item }}</strong>
      </template>
    </v-for>
  </div>
</template>

export default {
  name: 'LiveUsersWidget',
  // 👇 只需將其添加為額外屬性
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;

export default {
  name: 'LiveUsersWidget',
  columns: 3,
  created() {
    // 👇 `$options` 包含組件的所有元數(shù)據(jù)
    console.log(`Using ${this.$options.metadata} columns`);
  },
};

<!-- "single" 文件組件 -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

<!-- OverflowMenu.vue -->
<template>
  <Menu>
    <!-- 添加自定義按鈕來觸發(fā)我們的菜單 -->
    <template #button v-slot="bind">
      <!-- 使用 bind 傳遞點(diǎn)擊處理程序、a11y 屬性等。 -->
      <Button v-bind="bind">
        <!-- 使用我們自己的“...”圖標(biāo)，此按鈕沒有文字 -->
        <template #icon>
          <svg src="./ellipsis.svg" />
        </template>
      </Button>
    </template>
  </Menu>
</template>

<template>
  <OverflowMenu
    :menu-items="items"
    @click="handleMenuClick"
  />
</template>

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

 
// Parent.vue 中的某個(gè)地方
this.$refs.child.method();

<template>
  <ChildComponent
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>

<!-- Parent.vue -->
<template>
  <ChildComponent :trigger="shouldCallMethod" />
</template>

// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // 當(dāng)觸發(fā)器設(shè)置為 `true` 時(shí)調(diào)用該方法
        this.method();
      }
    }
  }
}

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

// Parent.vue 中的某個(gè)地方
this.$refs.child.method();

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // 使用對(duì)象語法而不僅僅是方法
    colours: {
      // 這將讓 Vue 知道查看數(shù)組內(nèi)部
      deep: true,

      // 我們必須將我們的方法移動(dòng)到處理程序字段
      handler()
        console.log('顏色列表已更改！');
      }
    }
  }
}

watch(
  colours,
  () => {
    console.log('顏色列表已更改！');
  },
  {
    deep: true,
  }
);

someurl.com/edit?date-range=last-week

const dateRange = this.$route.query.dateRange;

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <h4 v-if="expanded">
      {{ subheading }}
    </h4>
    <div v-if="expanded" class="card-content">
      <slot/>
    </div>
    <SocialShare v-if="expanded" />
  </div>
</template>

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <template v-if="expanded">
      <h4>
        {{ subheading }}
      </h4>
      <div class="card-content">
        <slot/>
      </div>
      <SocialShare/>
    </template>
  </div>
</template>

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};