diff --git a/_config.yml b/_config.yml
index 9dc360366..9d2207cf1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -187,4 +187,3 @@ alias:
   examples/svg.html: v2/examples/svg.html
   examples/todomvc.html: v2/examples/todomvc.html
   examples/tree-view.html: v2/examples/tree-view.html
-
diff --git a/package.json b/package.json
index f01a31d00..a61914260 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "jp.vuejs.org",
   "private": true,
   "hexo": {
-    "version": "3.4.4"
+    "version": "3.6.0"
   },
   "dependencies": {
     "hexo": "^3.4.2",
diff --git a/src/v2/api/index.md b/src/v2/api/index.md
index c119f7c58..53e72e732 100644
--- a/src/v2/api/index.md
+++ b/src/v2/api/index.md
@@ -1434,7 +1434,7 @@ updated: 2018-03-21
 
 - **詳細:**
 
-  親スコープの (`.native` 修飾子なしの) `v-on` イベントリスナーを含みます。これは、`v-on="$listeners"` を介して内部コンポーネントに渡すことができます。高次コンポーネントを作成するときに便利です。
+  親スコープの (`.native` 修飾子なしの) `v-on` イベントリスナーを含みます。これは、`v-on="$listeners"` を介して内部コンポーネントに渡すことができます。透過的なラッパーコンポーネントを作成するときに便利です。
 
 ## インスタンスメソッド / データ
 
diff --git a/src/v2/guide/components-custom-events.md b/src/v2/guide/components-custom-events.md
new file mode 100644
index 000000000..b6bbc7327
--- /dev/null
+++ b/src/v2/guide/components-custom-events.md
@@ -0,0 +1,170 @@
+---
+title: Custom Events
+type: guide
+order: 103
+---
+
+> ⚠️注意: この内容は原文のままです。現在翻訳中ですのでお待ち下さい。🙏
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Event Names
+
+Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
+
+```js
+this.$emit('myEvent')
+```
+
+Listening to the kebab-cased version will have no effect:
+
+```html
+<my-component v-on:my-event="doSomething"></my-component>
+```
+
+Unlike components and props, event names will never be used as variable or property names in JavaScript, so there's no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` -- making `myEvent` impossible to listen to.
+
+For these reasons, we recommend you **always use kebab-case for event names**.
+
+## Customizing Component `v-model`
+
+> New in 2.2.0+
+
+By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` attribute for a [different purpose](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value). Using the `model` option can avoid a conflict in such cases:
+
+```js
+Vue.component('base-checkbox', {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    checked: Boolean
+  },
+  template: `
+    <input
+      type="checkbox"
+      v-bind:checked="checked"
+      v-on:change="$emit('change', $event.target.value)"
+    >
+  `
+})
+```
+
+Now when using `v-model` on this component:
+
+```js
+<base-checkbox v-model="lovingVue"></base-checkbox>
+```
+
+the value of `lovingVue` will be passed to the `checked` prop. The `lovingVue` property will then be updated when `<base-checkbox>` emits a `change` event with a new value.
+
+<p class="tip">Note that you still have to declare the <code>checked</code> prop in component's <code>props</code> option.</p>
+
+## Binding Native Events to Components
+
+There may be times when you want to listen directly to a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`:
+
+```html
+<base-input v-on:focus.native="onFocus"></base-input>
+```
+
+This can be useful sometimes, but it's not a good idea when you're trying to listen on a very specific element, like an `<input>`. For example, the `<base-input>` component above might refactor so that the root element is actually a `<label>` element:
+
+```html
+<label>
+  {{ label }}
+  <input
+    v-bind="$attrs"
+    v-bind:value="value"
+    v-on:input="$emit('input', $event.target.value)"
+  >
+</label>
+```
+
+In that case, the `.native` listener in the parent would silently break. There would be no errors, but the `onFocus` handler wouldn't be called when we expected it to.
+
+To solve this problem, Vue provides a `$listeners` property containing an object of listeners being used on the component. For example:
+
+```js
+{
+  focus: function (event) { /* ... */ }
+  input: function (value) { /* ... */ },
+}
+```
+
+Using the `$listeners` property, you can forward all event listeners on the component to a specific child element with `v-on="$listeners"`. For elements like `<input>`, that you also want to work with `v-model`, it's often useful to create a new computed property for listeners, like `inputListeners` below:
+
+```js
+Vue.component('base-input', {
+  inheritAttrs: false,
+  props: ['label', 'value'],
+  computed: {
+    inputListeners: function () {
+      var vm = this
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign({},
+        // We add all the listeners from the parent
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: function (event) {
+            vm.$emit('input', event.target.value)
+          }
+        }
+      )
+    }
+  },
+  template: `
+    <label>
+      {{ label }}
+      <input
+        v-bind="$attrs"
+        v-bind:value="value"
+        v-on="inputListeners"
+      >
+    </label>
+  `
+})
+```
+
+Now the `<base-input>` component is a **fully transparent wrapper**, meaning it can be used exactly like a normal `<input>` element: all the same attributes and listeners will work.
+
+## `.sync` Modifier
+
+> New in 2.3.0+
+
+In some cases, we may need "two-way binding" for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.
+
+That's why instead, we recommend emitting events in the pattern of `update:my-prop-name`. For example, in a hypothetical component with a `title` prop, we could communicate the intent of assigning a new value with:
+
+```js
+this.$emit('update:title', newTitle)
+```
+
+Then the parent can listen to that event and update a local data property, if it wants to. For example:
+
+```html
+<text-document
+  v-bind:title="doc.title"
+  v-on:update:title="doc.title = $event"
+></text-document>
+```
+
+For convenience, we offer a shorthand for this pattern with the `.sync` modifier:
+
+```html
+<text-document v-bind:title.sync="doc.title"></text-document>
+```
+
+The `.sync` modifier can also be used with `v-bind` when using an object to set multiple props at once:
+
+```html
+<text-document v-bind.sync="doc"></text-document>
+```
+
+This passes each property in the `doc` object (e.g. `title`) as an individual prop, then adds `v-on` update listeners for each one.
+
+<p class="tip">Using <code>v-bind.sync</code> with a literal object, such as in <code>v-bind.sync="{ title: doc.title }"</code>, will not work. If you want to include multiple, unrelated data properties in the same <code>v-bind.sync</code>, we recommend creating a computed property that returns an object.</p>
diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
new file mode 100644
index 000000000..ded93f26f
--- /dev/null
+++ b/src/v2/guide/components-dynamic-async.md
@@ -0,0 +1,275 @@
+---
+title: Dynamic & Async Components
+type: guide
+order: 105
+---
+
+> ⚠️注意: この内容は原文のままです。現在翻訳中ですのでお待ち下さい。🙏
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## `keep-alive` with Dynamic Components
+
+Earlier, we used the `is` attribute to switch between components in a tabbed interface:
+
+```html
+<component v-bind:is="currentTabComponent"></component>
+```
+
+When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little:
+
+{% raw %}
+<div id="dynamic-component-demo" class="demo">
+  <button
+    v-for="tab in tabs"
+    v-bind:key="tab"
+    v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]"
+    v-on:click="currentTab = tab"
+  >{{ tab }}</button>
+  <component
+    v-bind:is="currentTabComponent"
+    class="dynamic-component-demo-tab"
+  ></component>
+</div>
+<script>
+Vue.component('tab-posts', {
+  data: function () {
+    return {
+      posts: [
+        {
+          id: 1,
+          title: 'Cat Ipsum',
+          content: '<p>Dont wait for the storm to pass, dance in the rain kick up litter decide to want nothing to do with my owner today demand to be let outside at once, and expect owner to wait for me as i think about it cat cat moo moo lick ears lick paws so make meme, make cute face but lick the other cats. Kitty poochy chase imaginary bugs, but stand in front of the computer screen. Sweet beast cat dog hate mouse eat string barf pillow no baths hate everything stare at guinea pigs. My left donut is missing, as is my right loved it, hated it, loved it, hated it scoot butt on the rug cat not kitten around</p>'
+        },
+        {
+          id: 2,
+          title: 'Hipster Ipsum',
+          content: '<p>Bushwick blue bottle scenester helvetica ugh, meh four loko. Put a bird on it lumbersexual franzen shabby chic, street art knausgaard trust fund shaman scenester live-edge mixtape taxidermy viral yuccie succulents. Keytar poke bicycle rights, crucifix street art neutra air plant PBR&B hoodie plaid venmo. Tilde swag art party fanny pack vinyl letterpress venmo jean shorts offal mumblecore. Vice blog gentrify mlkshk tattooed occupy snackwave, hoodie craft beer next level migas 8-bit chartreuse. Trust fund food truck drinking vinegar gochujang.</p>'
+        },
+        {
+          id: 3,
+          title: 'Cupcake Ipsum',
+          content: '<p>Icing dessert soufflé lollipop chocolate bar sweet tart cake chupa chups. Soufflé marzipan jelly beans croissant toffee marzipan cupcake icing fruitcake. Muffin cake pudding soufflé wafer jelly bear claw sesame snaps marshmallow. Marzipan soufflé croissant lemon drops gingerbread sugar plum lemon drops apple pie gummies. Sweet roll donut oat cake toffee cake. Liquorice candy macaroon toffee cookie marzipan.</p>'
+        }
+      ],
+      selectedPost: null
+    }
+  },
+  template: '\
+    <div class="dynamic-component-demo-posts-tab">\
+      <ul class="dynamic-component-demo-posts-sidebar">\
+        <li\
+          v-for="post in posts"\
+          v-bind:key="post.id"\
+          v-bind:class="{ \'dynamic-component-demo-active\': post === selectedPost }"\
+          v-on:click="selectedPost = post"\
+        >\
+          {{ post.title }}\
+        </li>\
+      </ul>\
+      <div class="dynamic-component-demo-post-container">\
+        <div \
+          v-if="selectedPost"\
+          class="dynamic-component-demo-post"\
+        >\
+          <h3>{{ selectedPost.title }}</h3>\
+          <div v-html="selectedPost.content"></div>\
+        </div>\
+        <strong v-else>\
+          Click on a blog title to the left to view it.\
+        </strong>\
+      </div>\
+    </div>\
+  '
+})
+Vue.component('tab-archive', {
+  template: '<div>Archive component</div>'
+})
+new Vue({
+  el: '#dynamic-component-demo',
+  data: {
+    currentTab: 'Posts',
+    tabs: ['Posts', 'Archive']
+  },
+  computed: {
+    currentTabComponent: function () {
+      return 'tab-' + this.currentTab.toLowerCase()
+    }
+  }
+})
+</script>
+<style>
+.dynamic-component-demo-tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.dynamic-component-demo-tab-button:hover {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab-button.dynamic-component-demo-active {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+.dynamic-component-demo-posts-tab {
+  display: flex;
+}
+.dynamic-component-demo-posts-sidebar {
+  max-width: 40vw;
+  margin: 0 !important;
+  padding: 0 10px 0 0 !important;
+  list-style-type: none;
+  border-right: 1px solid #ccc;
+}
+.dynamic-component-demo-posts-sidebar li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+}
+.dynamic-component-demo-posts-sidebar li:hover {
+  background: #eee;
+}
+.dynamic-component-demo-posts-sidebar li.dynamic-component-demo-active {
+  background: lightblue;
+}
+.dynamic-component-demo-post-container {
+  padding-left: 10px;
+}
+.dynamic-component-demo-post > :first-child {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
+</style>
+{% endraw %}
+
+You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the `currentTabComponent`.
+
+Recreating dynamic components is normally useful behavior, but in this case, we'd really like those tab component instances to be cached once they're created for the first time. To solve this problem, we can wrap our dynamic component with a `<keep-alive>` element:
+
+``` html
+<!-- Inactive components will be cached! -->
+<keep-alive>
+  <component v-bind:is="currentTabComponent"></component>
+</keep-alive>
+```
+
+Check out the result below:
+
+{% raw %}
+<div id="dynamic-component-keep-alive-demo" class="demo">
+  <button
+    v-for="tab in tabs"
+    v-bind:key="tab"
+    v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]"
+    v-on:click="currentTab = tab"
+  >{{ tab }}</button>
+  <keep-alive>
+    <component
+      v-bind:is="currentTabComponent"
+      class="dynamic-component-demo-tab"
+    ></component>
+  </keep-alive>
+</div>
+<script>
+new Vue({
+  el: '#dynamic-component-keep-alive-demo',
+  data: {
+    currentTab: 'Posts',
+    tabs: ['Posts', 'Archive']
+  },
+  computed: {
+    currentTabComponent: function () {
+      return 'tab-' + this.currentTab.toLowerCase()
+    }
+  }
+})
+</script>
+{% endraw %}
+
+Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this fiddle](https://jsfiddle.net/chrisvfritz/Lp20op9o/) for the complete code.
+
+<p class="tip">Note that `<keep-alive>` requires the components being switched between to all have names, either using the `name` option on a component, or through local/global registration.</p>
+
+Check out more details on `<keep-alive>` in the [API reference](../api/#keep-alive).
+
+## Async Components
+
+In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
+
+``` js
+Vue.component('async-example', function (resolve, reject) {
+  setTimeout(function () {
+    // Pass the component definition to the resolve callback
+    resolve({
+      template: '<div>I am async!</div>'
+    })
+  }, 1000)
+})
+```
+
+As you can see, the factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is for demonstration; how to retrieve the component is up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting/):
+
+``` js
+Vue.component('async-webpack-example', function (resolve) {
+  // This special require syntax will instruct Webpack to
+  // automatically split your built code into bundles which
+  // are loaded over Ajax requests.
+  require(['./my-async-component'], resolve)
+})
+```
+
+You can also return a `Promise` in the factory function, so with Webpack 2 and ES2015 syntax you can do:
+
+``` js
+Vue.component(
+  'async-webpack-example',
+  // The `import` function returns a Promise.
+  () => import('./my-async-component')
+)
+```
+
+When using [local registration](components.html#Local-Registration), you can also directly provide a function that returns a `Promise`:
+
+``` js
+new Vue({
+  // ...
+  components: {
+    'my-component': () => import('./my-async-component')
+  }
+})
+```
+
+<p class="tip">If you're a <strong>Browserify</strong> user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.</p>
+
+### Handling Loading State
+
+> New in 2.3.0+
+
+The async component factory can also return an object of the following format:
+
+``` js
+const AsyncCompontent = () => ({
+  // The component to load (should be a Promise)
+  component: import('./MyComponent.vue'),
+  // A component to use while the async component is loading
+  loading: LoadingComponent,
+  // A component to use if the load fails
+  error: ErrorComponent,
+  // Delay before showing the loading component. Default: 200ms.
+  delay: 200,
+  // The error component will be displayed if a timeout is
+  // provided and exceeded. Default: Infinity.
+  timeout: 3000
+})
+```
+
+> Note that you must use [Vue Router](https://github.com/vuejs/vue-router) 2.4.0+ if you wish to use the above syntax for route components.
diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md
new file mode 100644
index 000000000..3b20aca8d
--- /dev/null
+++ b/src/v2/guide/components-edge-cases.md
@@ -0,0 +1,321 @@
+---
+title: Handling Edge Cases
+type: guide
+order: 106
+---
+
+> ⚠️注意: この内容は原文のままです。現在翻訳中ですのでお待ち下さい。🙏
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+<p class="tip">All the features on this page document the handling of edge cases, meaning unusual situations that sometimes require bending Vue's rules a little. Note however, that they all have disadvantages or situations where they could be dangerous. These are noted in each case, so keep them in mind when deciding to use each feature.</p>
+
+## Element & Component Access
+
+In most cases, it's best to avoid reaching into other component instances or manually manipulating DOM elements. There are cases, however, when it can be appropriate.
+
+### Accessing the Root Instance
+
+In every subcomponent of a `new Vue` instance, this root instance can be accessed with the `$root` property. For example, in this root instance:
+
+```js
+// The root Vue instance
+new Vue({
+  data: {
+    foo: 1
+  },
+  computed: {
+    bar: function () { /* ... */ }
+  }
+  methods: {
+    baz: function () { /* ... */ }
+  }
+})
+```
+
+All subcomponents will now be able to access this instance and use it as a global store:
+
+```js
+// Get root data
+this.$root.foo
+
+// Set root data
+this.$root.foo = 2
+
+// Access root computed properties
+this.$root.bar
+
+// Call root methods
+this.$root.baz()
+```
+
+<p class="tip">This can be convenient for demos or very small apps with a handful of components. However, the pattern does not scale well to medium or large-scale applications, so we strongly recommend using <a href="https://github.com/vuejs/vuex">Vuex</a> to manage state in most cases.</p>
+
+### Accessing the Parent Component Instance
+
+Similar to `$root`, the `$parent` property can be used to access the parent instance from a child. This can be tempting to reach for as a lazy alternative to passing data with a prop.
+
+<p class="tip">In most cases, reaching into the parent makes your application more difficult to debug and understand, especially if you mutate data in the parent. When looking at that component later, it will be very difficult to figure out where that mutation came from.</p>
+
+There are cases however, particularly shared component libraries, when this _might_ be appropriate. For example, in abstract components that interact with JavaScript APIs instead of rendering HTML, like these hypothetical Google Maps components:
+
+```html
+<google-map>
+  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
+</google-map>
+```
+
+The `<google-map>` component might define a `map` property that all subcomponents need access to. In this case `<google-map-markers>` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://jsfiddle.net/chrisvfritz/ttzutdxh/).
+
+Keep in mind, however, that components built with this pattern are still inherently fragile. For example, imagine we add a new `<google-map-region>` component and when `<google-map-markers>` appears within that, it should only render markers that fall within that region:
+
+```html
+<google-map>
+  <google-map-region v-bind:shape="cityBoundaries">
+    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
+  </google-map-region>
+</google-map>
+```
+
+Then inside `<google-map-markers>` you might find yourself reaching for a hack like this:
+
+```js
+var map = this.$parent.map || this.$parent.$parent.map
+```
+
+This has quickly gotten out of hand. That's why to provide context information to descendent components arbitrarily deep, we instead recommend [dependency injection](#Dependency-Injection).
+
+### Accessing Child Component Instances & Child Elements
+
+Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component using the `ref` attribute. For example:
+
+```html
+<base-input ref="usernameInput"></base-input>
+```
+
+Now in the component where you've defined this `ref`, you can use:
+
+```js
+this.$refs.usernameInput
+```
+
+to access the `<base-input>` instance. This may be useful when you want to, for example, programmatically focus this input from a parent. In that case, the `<base-input>` component may similarly use a `ref` to provide access to specific elements inside it, such as:
+
+```html
+<input ref="input">
+```
+
+And even define methods for use by the parent:
+
+```js
+methods: {
+  // Used to focus the input from the parent
+  focus: function () {
+    this.$refs.input.focus()
+  }
+}
+```
+
+Thus allowing the parent component to focus the input inside `<base-input>` with:
+
+```js
+this.$refs.usernameInput.focus()
+```
+
+When `ref` is used together with `v-for`, the ref you get will be an array containing the child components mirroring the data source.
+
+<p class="tip"><code>$refs</code> are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing <code>$refs</code> from within templates or computed properties.</p>
+
+### Dependency Injection
+
+Earlier, when we described [Accessing the Parent Component Instance](#Accessing-the-Parent-Component-Instance), we showed an example like this:
+
+```html
+<google-map>
+  <google-map-region v-bind:shape="cityBoundaries">
+    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
+  </google-map-region>
+</google-map>
+```
+
+In this component, all descendants of `<google-map>` needed access to a `getMap` method, in order to know which map to interact with. Unfortunately, using the `$parent` property didn't scale well to more deeply nested components. That's where dependency injection can be useful, using two new instance options: `provide` and `inject`.
+
+The `provide` options allows us to specify the data/methods we want to **provide** to descendent components. In this case, that's the `getMap` method inside `<google-map>`:
+
+```js
+provide: function () {
+  return {
+    getMap: this.getMap
+  }
+}
+```
+
+Then in any descendants, we can use the `inject` option to receive specific properties we'd like to add to that instance:
+
+```js
+inject: ['getMap']
+```
+
+You can see the [full example here](https://jsfiddle.net/chrisvfritz/tdv8dt3s/). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of `<google-map>`. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`.
+
+In fact, you can think of dependency injection as sort of "long-range props", except:
+
+* ancestor components don't need to know which descendants use the properties it provides
+* descendant components don't know need to know where injected properties are coming from
+
+<p class="tip">However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as <a href="#Accessing-the-Root-Instance">using <code>$root</code></a> for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like <a href="https://github.com/vuejs/vuex">Vuex</a> instead.</p>
+
+Learn more about dependency injection in [the API doc](https://vuejs.org/v2/api/#provide-inject).
+
+## Programmatic Event Listeners
+
+So far, you've seen uses of `$emit`, listened to with `v-on`, but Vue instances also offer other methods in its events interface. We can:
+
+- Listen for an event with `$on(eventName, eventHandler)`
+- Listen for an event only once with `$once(eventName, eventHandler)`
+- Stop listening for an event with `$off(eventName, eventHandler)`
+
+You normally won't have to use these, but they're available for cases when you need to manually listen for events on a component instance. To learn more about their usage, check out the API for [Events Instance Methods](https://vuejs.org/v2/api/#Instance-Methods-Events).
+
+<p class="tip">Note that Vue's event system is different from the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>. Though they work similarly, <code>$emit</code>, <code>$on</code>, and <code>$off</code> are <strong>not</strong> aliases for <code>dispatchEvent</code>, <code>addEventListener</code>, and <code>removeEventListener</code>.</p>
+
+## Circular References
+
+### Recursive Components
+
+Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option:
+
+``` js
+name: 'unique-name-of-my-component'
+```
+
+When you register a component globally using `Vue.component`, the global ID is automatically set as the component's `name` option.
+
+``` js
+Vue.component('unique-name-of-my-component', {
+  // ...
+})
+```
+
+If you're not careful, recursive components can also lead to infinite loops:
+
+``` js
+name: 'stack-overflow',
+template: '<div><stack-overflow></stack-overflow></div>'
+```
+
+A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
+
+### Circular References Between Components
+
+Let's say you're building a file directory tree, like in Finder or File Explorer. You might have a `tree-folder` component with this template:
+
+``` html
+<p>
+  <span>{{ folder.name }}</span>
+  <tree-folder-contents :children="folder.children"/>
+</p>
+```
+
+Then a `tree-folder-contents` component with this template:
+
+``` html
+<ul>
+  <li v-for="child in children">
+    <tree-folder v-if="child.children" :folder="child"/>
+    <span v-else>{{ child.name }}</span>
+  </li>
+</ul>
+```
+
+When you look closely, you'll see that these components will actually be each other's descendent _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here.
+
+However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
+
+```
+Failed to mount component: template or render function not defined.
+```
+
+To explain what's happening, let's call our components A and B. The module system sees that it needs A, but first A needs B, but B needs A, but A needs B, etc. It's stuck in a loop, not knowing how to fully resolve either component without first resolving the other. To fix this, we need to give the module system a point at which it can say, "A needs B _eventually_, but there's no need to resolve B first."
+
+In our case, let's make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
+
+``` js
+beforeCreate: function () {
+  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
+}
+```
+
+Or alternatively, you could use Webpack's asynchronous `import` when you register the component locally:
+
+``` js
+components: {
+  TreeFolderContents: () => import('./tree-folder-contents.vue')
+}
+```
+
+Problem solved!
+
+## Alternate Template Definitions
+
+### Inline Templates
+
+When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
+
+``` html
+<my-component inline-template>
+  <div>
+    <p>These are compiled as the component's own template.</p>
+    <p>Not parent's transclusion content.</p>
+  </div>
+</my-component>
+```
+
+<p class="tip">However, <code>inline-template</code> makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the <code>template</code> option or in a <code>&lt;template&gt;</code> element in a <code>.vue</code> file.</p>
+
+### X-Templates
+
+Another way to define templates is inside of a script element with the type `text/x-template`, then referencing the template by an id. For example:
+
+``` html
+<script type="text/x-template" id="hello-world-template">
+  <p>Hello hello hello</p>
+</script>
+```
+
+``` js
+Vue.component('hello-world', {
+  template: '#hello-world-template'
+})
+```
+
+<p class="tip">These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.</p>
+
+## Controlling Updates
+
+Thanks to Vue's Reactivity system, it always knows when to update (if you use it correctly). There are edge cases, however, when you might want to force an update, despite the fact that no reactive data has changed. Then there are other cases when you might want to prevent unnecessary updates.
+
+### Forcing an Update
+
+<p class="tip">If you find yourself needing to force an update in Vue, in 99.99% of cases, you've made a mistake somewhere.</p>
+
+You may not have accounted for change detection caveats [with arrays](https://vuejs.org/v2/guide/list.html#Caveats) or [objects](https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats), or you may be relying on state that isn't tracked by Vue's reactivity system, e.g. with `data`.
+
+However, if you've ruled out the above and find yourself in this extremely rare situation of having to manually force an update, you can do so with [`$forceUpdate`](../api/#vm-forceUpdate).
+
+### Cheap Static Components with `v-once`
+
+Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
+
+``` js
+Vue.component('terms-of-service', {
+  template: `
+    <div v-once>
+      <h1>Terms of Service</h1>
+      ... a lot of static content ...
+    </div>
+  `
+})
+```
+
+<p class="tip">Once again, try not to overuse this pattern. While convenient in those rare cases when you have to render a lot of static content, it's simply not necessary unless you actually notice slow rendering -- plus, it could cause a lot of confusion later. For example, imagine another developer who's not familiar with <code>v-once</code> or simply misses it in the template. They might spend hours trying to figure out why the template isn't updating correctly.</p>
diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md
new file mode 100644
index 000000000..62b1f8d34
--- /dev/null
+++ b/src/v2/guide/components-props.md
@@ -0,0 +1,316 @@
+---
+title: Props
+type: guide
+order: 102
+---
+
+> ⚠️注意: この内容は原文のままです。現在翻訳中ですのでお待ち下さい。🙏
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Prop Casing (camelCase vs kebab-case)
+
+HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:
+
+``` js
+Vue.component('blog-post', {
+  // camelCase in JavaScript
+  props: ['postTitle'],
+  template: '<h3>{{ postTitle }}</h3>'
+})
+```
+
+``` html
+<!-- kebab-case in HTML -->
+<child post-title="hello!"></child>
+```
+
+Again, if you're using string templates, this limitation does not apply.
+
+## Static and Dynamic Props
+
+So far, you've seen props passed a static value, like in:
+
+```html
+<blog-post title="My journey with Vue"></blog-post>
+```
+
+You've also seen props assigned dynamically with `v-bind`, such as in:
+
+```html
+<blog-post v-bind:title="post.title"></blog-post>
+```
+
+In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop.
+
+### Passing a Number
+
+```html
+<!-- Even though `42` is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.       -->
+<blog-post v-bind:likes="42"></blog-post>
+
+<!-- Dynamically assign to the value of a variable. -->
+<blog-post v-bind:likes="post.likes"></blog-post>
+```
+
+### Passing a Boolean
+
+```html
+<!-- Including the prop with no value will imply `true`. -->
+<blog-post favorited></blog-post>
+
+<!-- Even though `false` is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.          -->
+<base-input v-bind:favorited="false">
+
+<!-- Dynamically assign to the value of a variable. -->
+<base-input v-bind:favorited="post.currentUserFavorited">
+```
+
+### Passing an Array
+
+```html
+<!-- Even though the array is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.            -->
+<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
+
+<!-- Dynamically assign to the value of a variable. -->
+<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
+```
+
+### Passing an Object
+
+```html
+<!-- Even though the object is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.             -->
+<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>
+
+<!-- Dynamically assign to the value of a variable. -->
+<blog-post v-bind:post="post"></blog-post>
+```
+
+### Passing the Properties of an Object
+
+If you want to pass all the properties of an object as props, you can use `v-bind` without an argument (`v-bind` instead of `v-bind:prop-name`). For example, given a `post` object:
+
+``` js
+post: {
+  id: 1,
+  title: 'My Journey with Vue'
+}
+```
+
+The following template:
+
+``` html
+<blog-post v-bind="post"></blog-post>
+```
+
+Will be equivalent to:
+
+``` html
+<blog-post
+  v-bind:id="post.id"
+  v-bind:title="post.title"
+></blog-post>
+```
+
+## One-Way Data Flow
+
+All props form a **one-way-down binding** between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
+
+In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.
+
+There are usually two cases where it's tempting to mutate a prop:
+
+1. **The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.** In this case, it's best to define a local data property that uses the prop as its initial value:
+
+  ``` js
+  props: ['initialCounter'],
+  data: function () {
+    return {
+      counter: this.initialCounter
+    }
+  }
+  ```
+
+2. **The prop is passed in as a raw value that needs to be transformed.** In this case, it's best to define a computed property using the prop's value:
+
+  ``` js
+  props: ['size'],
+  computed: {
+    normalizedSize: function () {
+      return this.size.trim().toLowerCase()
+    }
+  }
+  ```
+
+<p class="tip">Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component **will** affect parent state.</p>
+
+## Prop Validation
+
+Components can specify requirements for its props. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.
+
+To specify prop validations, you case provide an object with validation requirements to the value of `props`, instead of an array of strings. For example:
+
+``` js
+Vue.component('my-component', {
+  props: {
+    // Basic type check (`null` matches any type)
+    propA: Number,
+    // Multiple possible types
+    propB: [String, Number],
+    // Required string
+    propC: {
+      type: String,
+      required: true
+    },
+    // Number with a default value
+    propD: {
+      type: Number,
+      default: 100
+    },
+    // Object with a default value
+    propE: {
+      type: Object,
+      // Object or array defaults must be returned from
+      // a factory function
+      default: function () {
+        return { message: 'hello' }
+      }
+    },
+    // Custom validator function
+    propF: {
+      validator: function (value) {
+        // The value must match one of these strings
+        return ['success', 'warning', 'danger'].indexOf(value) !== -1
+      }
+    }
+  }
+})
+```
+
+When prop validation fails, Vue will produce a console warning (if using the development build).
+
+<p class="tip">Note that props are validated **before** a component instance is created, so instance properties (e.g. `data`, `computed`, etc) will not be available inside `default` or `validator` functions.</p>
+
+### Type Checks
+
+The `type` can be one of the following native constructors:
+
+- String
+- Number
+- Boolean
+- Function
+- Object
+- Array
+- Symbol
+
+In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists:
+
+```js
+function Person (firstName, lastName) {
+  this.firstName = firstName
+  this.lastName = lastName
+}
+```
+
+You could use:
+
+```js
+Vue.component('blog-post', {
+  props: {
+    author: Person
+  }
+})
+```
+
+to validate that the value of the `author` prop was created with `new Person`.
+
+## Non-Prop Attributes
+
+A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
+
+While explicitly defined props are preferred for passing information to a child component, authors of component libraries can't always foresee the contexts in which their components might be used. That's why components can accept arbitrary attributes, which are added to the component's root element.
+
+For example, imagine we're using a 3rd-party `bootstrap-date-input` component with a Bootstrap plugin that requires a `data-date-picker` attribute on the `input`. We can add this attribute to our component instance:
+
+``` html
+<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
+```
+
+And the `data-date-picker="activated"` attribute will automatically be added to the root element of `bootstrap-date-input`.
+
+### Replacing/Merging with Existing Attributes
+
+Imagine this is the template for `bootstrap-date-input`:
+
+``` html
+<input type="date" class="form-control">
+```
+
+To specify a theme for our date picker plugin, we might need to add a specific class, like this:
+
+``` html
+<bootstrap-date-input
+  data-date-picker="activated"
+  class="date-picker-theme-dark"
+></bootstrap-date-input>
+```
+
+In this case, two different values for `class` are defined:
+
+- `form-control`, which is set by the component in its template
+- `date-picker-theme-dark`, which is passed to the component by its parent
+
+For most attributes, the value provided to the component will replace the value set by the component. So for example, passing `type="text"` will replace `type="date"` and probably break it! Fortunately, the `class` and `style` attributes are a little smarter, so both values are merged, making the final value: `form-control date-picker-theme-dark`.
+
+### Disabling Attribute Inheritance
+
+If you do **not** want the root element of a component to inherit attributes, you can set `inheritAttrs: false` in the component's options. For example:
+
+```js
+Vue.component('my-component', {
+  inheritAttrs: false,
+  // ...
+})
+```
+
+This can be especially useful in combination with the `$attrs` instance property, which contains the attribute names and values passed to a component, such as:
+
+```js
+{
+  class: 'username-input',
+  placeholder: 'Enter your username'
+}
+```
+
+With `inheritAttrs: false` and `$attrs`, you can manually decide which element you want to forward attributes to, which is often desirable for [base components](../style-guide/#Base-component-names-strongly-recommended):
+
+```js
+Vue.component('base-input', {
+  inheritAttrs: false,
+  props: ['label', 'value'],
+  template: `
+    <label>
+      {{ label }}
+      <input
+        v-bind="$attrs"
+        v-bind:value="value"
+        v-on:input="$emit('input', $event.target.value)"
+      >
+    </label>
+  `
+})
+```
+
+This pattern allows you to use base components more like raw HTML elements, without having to care about which element is actually at its root:
+
+```html
+<base-input
+  v-model="username"
+  class="username-input"
+  placeholder="Enter your username"
+></base-input>
+```
diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
new file mode 100644
index 000000000..bee6c098c
--- /dev/null
+++ b/src/v2/guide/components-registration.md
@@ -0,0 +1,228 @@
+---
+title: Component Registration
+type: guide
+order: 101
+---
+
+> ⚠️注意: この内容は原文のままです。現在翻訳中ですのでお待ち下さい。🙏
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Component Names
+
+When registering a component, it will always be given a name. For example, in the global registration we've seen so far:
+
+```js
+Vue.component('my-component-name', { /* ... */ })
+```
+
+The component's name is the first argument of `Vue.component`.
+
+The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.
+
+You can see other recommendations for component names in the [Style Guide](../style-guide/#Base-component-names-strongly-recommended).
+
+### Name Casing
+
+You have two options when defining component names:
+
+#### With kebab-case
+
+```js
+Vue.component('my-component-name', { /* ... */ })
+```
+
+When defining a component with kebab-case, you must also use kebab-case when referencing its custom element, such as in `<my-component-name>`.
+
+#### With PascalCase
+
+```js
+Vue.component('MyComponentName', { /* ... */ })
+```
+
+When defining a component with PascalCase, you can use either case when referencing its custom element. That means both `<my-component-name>` and `<MyComponentName>` are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates).
+
+## Global Registration
+
+So far, we've only created components using `Vue.component`:
+
+```js
+Vue.component('my-component-name', {
+  // ... options ...
+})
+```
+
+These components are **globally registered**. That means they can be used in the template of any root Vue instance (`new Vue`) created after registration. For example:
+
+```js
+Vue.component('component-a', { /* ... */ })
+Vue.component('component-b', { /* ... */ })
+Vue.component('component-c', { /* ... */ })
+
+new Vue({ el: '#app' })
+```
+
+```html
+<div id="app">
+  <component-a></component-a>
+  <component-b></component-b>
+  <component-c></component-c>
+</div>
+```
+
+This even applies to all subcomponents, meaning all three of these components will also be available _inside each other_.
+
+## Local Registration
+
+Global registration often isn't ideal. For example, if you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.
+
+In these cases, you can define your components as plain JavaScript objects:
+
+```js
+var ComponentA = { /* ... */ }
+var ComponentB = { /* ... */ }
+var ComponentC = { /* ... */ }
+```
+
+Then define the components you'd like to use in a `components` option:
+
+```js
+new Vue({
+  el: '#app'
+  components: {
+    'component-a': ComponentA,
+    'component-b': ComponentB
+  }
+})
+```
+
+For each property in the `components` object, the key will be the name of the custom element, while the value will contain the options object for the component.
+
+Note that **locally registered components are _not_ also available in subcomponents**. For example, if you wanted `ComponentA` to be available in `ComponentB`, you'd have to use:
+
+```js
+var ComponentA = { /* ... */ }
+
+var ComponentB = {
+  components: {
+    'component-a': ComponentA
+  },
+  // ...
+}
+```
+
+Or if you're using ES2015 modules, such as through Babel and Webpack, that might look more like:
+
+```js
+import ComponentA from './ComponentA.vue'
+
+export default {
+  components: {
+    ComponentA
+  },
+  // ...
+}
+```
+
+Note that in ES2015+, placing a variable name like `ComponentA` inside an object is shorthand for `ComponentA: ComponentA`, meaning the name of the variable is both:
+
+- the custom element name to use in the template, and
+- the name of the variable containing the component options
+
+## Module Systems
+
+If you're not using a module system with `import`/`require`, you can probably skip this section for now. If you are, we have some special instructions and tips just for you.
+
+### Local Registration in a Module System
+
+If you're still here, then it's likely you're using a module system, such as with Babel and Webpack. In these cases, we recommend creating a `components`, with each component in its own file.
+
+Then you'll need to import each component you'd like to use, before you locally register it. For example, in a hypothetical `CompononentB.js` or `ComponentB.vue` file:
+
+```js
+import ComponentA from './ComponentA'
+import ComponentC from './ComponentC'
+
+export default {
+  components: {
+    ComponentA,
+    ComponentC
+  },
+  // ...
+}
+```
+
+Now both `ComponentA` and `ComponentC` can be used inside `ComponentB`'s template.
+
+### Automatic Global Registration of Base Components
+
+Many of your components will be relatively generic, possibly only wrapping an an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components.
+
+The result is that many components may include long lists of base components:
+
+```js
+import BaseButton from './BaseButton.vue'
+import BaseIcon from './BaseIcon.vue'
+import BaseInput from './BaseInput.vue'
+
+export default {
+  components: {
+    BaseButton,
+    BaseIcon,
+    BaseInput
+  }
+}
+```
+
+Just to support relatively little markup in a template:
+
+```html
+<BaseInput
+  v-model="searchText"
+  @keydown.enter="search"
+/>
+<BaseButton @click="search">
+  <BaseIcon name="search"/>
+</BaseButton>
+```
+
+Fortunately, if you're using Webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`):
+
+```js
+import Vue from 'vue'
+import upperFirst from 'lodash/upperFirst'
+import camelCase from 'lodash/camelCase'
+
+const requireComponent = require.context(
+  // The relative path of the components folder
+  './components',
+  // Whether or not to look in subfolders
+  false,
+  // The regular expression used to match base component filenames
+  /Base[A-Z]\w+\.(vue|js)$/
+)
+
+requireComponent.keys().forEach(fileName => {
+  // Get component config
+  const componentConfig = requireComponent(fileName)
+
+  // Get PascalCase name of component
+  const componentName = upperFirst(
+    camelCase(
+      // Strip the leading `'./` and extension from the filename
+      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
+    )
+  )
+
+  // Register component globally
+  Vue.component(
+    componentName,
+    // Look for the component options on `.default`, which will
+    // exist if the component was exported with `export default`,
+    // otherwise fall back to module's root.
+    componentConfig.default || componentConfig
+  )
+})
+```
+
+Remember that **global registration must take place before the root Vue instance is created (with `new Vue`)**. [Here's an example](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js) of this pattern in a real project context.
diff --git a/src/v2/guide/components-slots.md b/src/v2/guide/components-slots.md
new file mode 100644
index 000000000..cc9296526
--- /dev/null
+++ b/src/v2/guide/components-slots.md
@@ -0,0 +1,231 @@
+---
+title: Slots
+type: guide
+order: 104
+---
+
+> ⚠️注意: この内容は原文のままです。現在翻訳中ですのでお待ち下さい。🙏
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Slot Content
+
+Vue implements a content distribution API that's modeled after the current [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `<slot>` element to serve as distribution outlets for content.
+
+This allows you to compose components like this:
+
+``` html
+<navigation-link url="/profile">
+  Your Profile
+</navigation-link>
+```
+
+Then in the template for `<navigation-link>`, you might have:
+
+``` html
+<a
+  v-bind:href="url"
+  class="nav-link"
+>
+  <slot></slot>
+</a>
+```
+
+When the component renders, the `<slot>` element will be replaced by "Your Profile". Slots can contain any template code, including HTML:
+
+``` html
+<navigation-link url="/profile">
+  <!-- Add a Font Awesome icon -->
+  <span class="fa fa-user"></span>
+  Your Profile
+</navigation-link>
+```
+
+Or even other components:
+
+``` html
+<navigation-link url="/profile">
+  <!-- Use a component to add an icon -->
+  <font-awesome-icon name="user"></font-awesome-icon>
+  Your Profile
+</navigation-link>
+```
+
+If `<navigation-link>` did **not** contain a `<slot>` element, any content passed to it would simply be discarded.
+
+## Named Slots
+
+There are times when it's useful to have multiple slots. For example, in a hypothetical `base-layout` component with the following template:
+
+``` html
+<div class="container">
+  <header>
+    <!-- We want header content here -->
+  </header>
+  <main>
+    <!-- We want main content here -->
+  </main>
+  <footer>
+    <!-- We want footer content here -->
+  </footer>
+</div>
+```
+
+For these cases, the `<slot>` element has a special attribute, `name`, which can be used to define additional slots:
+
+``` html
+<div class="container">
+  <header>
+    <slot name="header"></slot>
+  </header>
+  <main>
+    <slot></slot>
+  </main>
+  <footer>
+    <slot name="footer"></slot>
+  </footer>
+</div>
+```
+
+To provide content to named slots, we can use the `slot` attribute on a `<template>` element in the parent:
+
+```html
+<base-layout>
+  <template slot="header">
+    <h1>Here might be a page title</h1>
+  </template>
+
+  <p>A paragraph for the main content.</p>
+  <p>And another one.</p>
+
+  <template slot="footer">
+    <p>Here's some contact info</p>
+  </template>
+</base-layout>
+```
+
+Or, the `slot` attribute can also be used directly on a normal element:
+
+``` html
+<base-layout>
+  <h1 slot="header">Here might be a page title</h1>
+
+  <p>A paragraph for the main content.</p>
+  <p>And another one.</p>
+
+  <p slot="footer">Here's some contact info</p>
+</base-layout>
+```
+
+There can still be one unnamed slot, which is the **default slot** that serves as a catch-all outlet for any unmatched content. In both examples above, the  rendered HTML would be:
+
+``` html
+<div class="container">
+  <header>
+    <h1>Here might be a page title</h1>
+  </header>
+  <main>
+    <p>A paragraph for the main content.</p>
+    <p>And another one.</p>
+  </main>
+  <footer>
+    <p>Here's some contact info</p>
+  </footer>
+</div>
+```
+
+## Default Slot Content
+
+There are cases when it's useful to provide a slot with default content. For example, a `<submit-button>` component might want the content of the button to be "Submit" by default, but also allow users to override with "Save", "Upload", or anything else.
+
+To achieve this, specify the default content in between the `<slot>` tags.
+
+```html
+<button type="submit">
+  <slot>Submit</slot>
+</button>
+```
+
+If the slot is provided content by the parent, it will replace the default content.
+
+## Compilation Scope
+
+When you want to use data inside a slot, such as in:
+
+``` html
+<navigation-link url="/profile">
+  Logged in as {{ user.name }}
+</navigation-link>
+```
+
+That slot has access to the same instance properties (i.e. the same "scope") as the rest of the template. The slot does **not** have access to `<navigation-link>`'s scope. For example, trying to access `url` would not work. As a rule, remember that:
+
+> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
+
+## Scoped Slots
+
+> New in 2.1.0+
+
+Sometimes you'll want to provide a component with a reusable slot that can access data from the child component. For example, a simple `<todo-list>` component may contain the following in its template:
+
+```html
+<ul>
+  <li
+    v-for="todo in todos"
+    v-bind:key="todo.id"
+  >
+    {{ todo.text }}
+  </li>
+</ul>
+```
+
+But in some parts of our app, we want the individual todo items to render something different than just the `todo.text`. This is where scoped slots come in.
+
+To make the feature possible, all we have to do is wrap the todo item content in a `<slot>` element, then pass the slot any data relevant to its context: in this case, the `todo` object:
+
+```html
+<ul>
+  <li
+    v-for="todo in todos"
+    v-bind:key="todo.id"
+  >
+    <!-- We have a slot for each todo, passing it the -->
+    <!-- `todo` object as a slot prop.                -->
+    <slot v-bind:todo="todo">
+      <!-- Fallback content -->
+      {{ todo.text }}
+    </slot>
+  </li>
+</ul>
+```
+
+Now when we use the `<todo-list>` component, we can optionally define an alternative `<template>` for todo items, but with access to data from the child via the `slot-scope` attribute:
+
+```html
+<todo-list v-bind:todos="todos">
+  <!-- Define `slotProps` as the name of our slot scope -->
+  <template slot-scope="slotProps">
+    <!-- Define a custom template for todo items, using -->
+    <!-- `slotProps` to customize each todo.            -->
+    <span v-if="slotProps.todo.isComplete">✓</span>
+    {{ slotProps.todo.text }}
+  </template>
+</todo-list>
+```
+
+> In 2.5.0+, `slot-scope` is no longer limited to the `<template>` element, but can instead be used on any element or component in the slot.
+
+### Destructuring `slot-scope`
+
+The value of `slot-scope` can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. This means in supported environments ([single-file components](single-file-components.html) or [modern browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Browser_compatibility)) you can also use [ES2015 destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) in the expression, like so:
+
+```html
+<todo-list v-bind:todos="todos">
+  <template slot-scope="{ todo }">
+    <span v-if="todo.isComplete">✓</span>
+    {{ todo.text }}
+  </template>
+</todo-list>
+```
+
+This is a great way to make scoped slots a little cleaner.
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index ea7ca7058..f87f7a587 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -1,1480 +1,596 @@
 ---
-title: コンポーネント
-updated: 2018-03-09
+title: コンポーネントの基本
+updated: 2018-04-15
 type: guide
 order: 11
 ---
 
-## コンポーネントとは何ですか？
+## 基本例
 
-コンポーネントは Vue.js の最も強力な機能の 1 つです。基本的な HTML 要素を拡張して再利用可能なコードのカプセル化を助けます。高いレベルでは、コンポーネントは Vue.js のコンパイラが指定された振舞いを加えるカスタム要素です。場合によっては、特別な `is` 属性で拡張されたネイティブな HTML 要素の姿をとることもあります。
+Vue コンポーネントの例を次に示します:
 
-全ての Vue コンポーネントは Vue インスタンスでもあるため、同じオプションオブジェクト(いくつかのルート固有のオプションを除きます)を受け入れ、同じライフサイクルフックを提供します。
-
-## コンポーネントの使用
-
-### グローバル登録
-
-以前のセクションで、以下のように Vue インスタンスを作成できることを学習しました:
-
-``` js
-new Vue({
-  el: '#some-element',
-  // オプション
-})
-```
-
-グローバルなコンポーネントを登録するためには、 `Vue.component(tagName, options)` を使うことができます。例:
-
-``` js
-Vue.component('my-component', {
-  // オプション
-})
-```
-
-<p class="tip">カスタムタグの名前について [W3C ルール](https://www.w3.org/TR/custom-elements/#concepts) (全て小文字で、ハイフンが含まれている必要がある)にしたがうことは良い取り組みと考えられますが、 Vue はそれを強制しないことを覚えておいてください。</p>
-
-一度登録すると、コンポーネントはカスタム要素 `<my-component>` として親のインスタンスのテンプレートで使用できます。コンポーネントが root の Vue インスタンスをインスタンス化する**前**に登録されているか確認してください。ここに完全な例を示します:
-
-``` html
-<div id="example">
-  <my-component></my-component>
-</div>
-```
-
-``` js
-// 登録する
-Vue.component('my-component', {
-  template: '<div>A custom component!</div>'
-})
-
-// root インスタンスを作成する
-new Vue({
-  el: '#example'
-})
-```
-
-描画される内容は以下になります:
-
-``` html
-<div id="example">
-  <div>A custom component!</div>
-</div>
-```
-
-{% raw %}
-<div id="example" class="demo">
-  <my-component></my-component>
-</div>
-<script>
-Vue.component('my-component', {
-  template: '<div>A custom component!</div>'
-})
-new Vue({ el: '#example' })
-</script>
-{% endraw %}
-
-### ローカル登録
-
-グローバルに全てのコンポーネントを登録する必要はありません。別のコンポーネントのインスタンスオプションの `components` に登録することで、そのコンポーネントのスコープ内でのみ利用可能なコンポーネントを作成できます:
-
-``` js
-var Child = {
-  template: '<div>A custom component!</div>'
-}
-
-new Vue({
-  // ...
-  components: {
-    // <my-component> は親テンプレートでのみ有効になります
-    'my-component': Child
-  }
-})
-```
-
-同じカプセル化は、ディレクティブのようなアセットタイプに対して適用されます。
-
-### DOM テンプレート解析の注意事項
-
-DOM をテンプレートとして使うとき(例、ある要素をすでに存在する要素にマウントするために `el` オプションを使うとき)、あなたは HTML がどのように動くかに内在する幾つかの制約の影響を受けます。なぜなら、 Vue はブラウザがテンプレートを解析して正規化した **後** にのみテンプレートの内容を検索することができるからです。特に、 `<ul>`, `<ol>`, `<table>`, `<select>` のようないくつかの要素は、その要素の内部にどの要素を表示させることができるかの制約を持ち、 `<option>` のようないくつかの要素は、ある特定の要素の内部でのみ表示されます。
-
-このことは、いくつかの制約をもつ要素と共にカスタムコンポーネントを使うときに問題に繋がるかもしれません。例:
-
-``` html
-<table>
-  <my-row>...</my-row>
-</table>
-```
-
-カスタムコンポーネントの `<my-row>` は無効なコンテンツとして巻き上げられます。それゆえ、後に描画されたアウトプットの中でエラーを引き起こします。回避策は `is` という特殊な属性を使うことです:
-
-``` html
-<table>
-  <tr is="my-row"></tr>
-</table>
-```
-**注目すべきは、もしあなたが以下のソースのどれかから文字列テンプレートを使う場合には、これらの制約は適用されないということです。**
-
-- `<script type="text/x-template">`
-- JavaScript のインラインテンプレート文字列
-- `.vue` コンポーネント
-
-そのため、可能なときはいつでも文字列テンプレートの使用が好まれます。
-
-### `data` は関数でなければならない
-
-Vue コンストラクタに渡すことのできるほとんどのオプションは、コンポーネントの中で使用できます。しかし、1 つだけ特別なケースがあります: `data` は関数でなければいけません。実際、以下を試すと:
-
-``` js
-Vue.component('my-component', {
-  template: '<span>{{ message }}</span>',
-  data: {
-    message: 'hello'
-  }
-})
-```
-
-その後 Vue の処理は止まり、コンポーネントインスタンスでは `data` は関数でなければならないと伝える警告をコンソールに出力します。しかしながら、どうしてそのルールが存在するかを理解するのはいいことでしょうから、ちょっとズルをしてみましょう。
-
-``` html
-<div id="example-2">
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-</div>
-```
-
-``` js
-var data = { counter: 0 }
-
-Vue.component('simple-counter', {
-  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
-  // data は技術的には関数なので、Vue は警告を出しません。
-  // しかし、各コンポーネントのインスタンスは
-  // 同じオブジェクトの参照を返します。
-  data: function () {
-    return data
-  }
-})
-
-new Vue({
-  el: '#example-2'
-})
-```
-
-{% raw %}
-<div id="example-2" class="demo">
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-</div>
-<script>
-var data = { counter: 0 }
-Vue.component('simple-counter', {
-  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
-  data: function () {
-    return data
-  }
-})
-new Vue({
-  el: '#example-2'
-})
-</script>
-{% endraw %}
-
-3 つのコンポーネントはすべて同じ `data` オブジェクトを共有しているので、ひとつのカウンタをインクリメントするとすべてのカウンタをインクリメントします！代わりに未使用の `data` オブジェクトを返すことにより、これを修正しましょう:
-
-``` js
-data: function () {
-  return {
-    counter: 0
-  }
-}
-```
-
-これで、すべてのカウンタはそれぞれカウンタ自身の内部状態を持ちます:
-
-{% raw %}
-<div id="example-2-5" class="demo">
-  <my-component></my-component>
-  <my-component></my-component>
-  <my-component></my-component>
-</div>
-<script>
-Vue.component('my-component', {
-  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
-  data: function () {
-    return {
-      counter: 0
-    }
-  }
-})
-new Vue({
-  el: '#example-2-5'
-})
-</script>
-{% endraw %}
-
-### コンポーネントの構成
-
-コンポーネントは、一緒に使われることを意図されています。もっとも一般的なのは、親子関係です: コンポーネント A は自分自身のテンプレートとして、コンポーネント B を使用します。それらは必ずお互いに通信する必要があります。親は子にデータを伝える必要があるかもしれませんし、子は子で何が起こったかを、親に伝える必要があるかもしれません。しかし、はっきりと定義されたインタフェースを経由して、親と子を可能な限り分離されたものとしておくこともまた、とても大切です。これにより、各々のコンポーネントのコードは比較的独立した状態で書かれ判断されることが保証されます。それゆえ、コンポーネントを、よりメンテナンス可能で潜在的に再利用可能にできます。
-
-Vue では、親子のコンポーネントの関係は、**props down, events up** というように要約することができます。親は、 **プロパティ**を経由して、データを子に伝え、子は**イベント**を経由して、親にメッセージを送ります。以下でどのように動くか見てみましょう。
-
-<p style="text-align: center;">
-  <img style="width: 300px;" src="/images/props-events.png" alt="props down, events up">
-</p>
-
-## プロパティ
-
-### プロパティによるデータの伝達
-
-全てのコンポーネントインスタンスは、各自の**隔離されたスコープ (isolated scope)** を持ちます。つまり、子コンポーネントのテンプレートで親データを直接参照できない(そしてすべきでない)ということです。データは**プロパティ**を使用して子コンポーネントに伝達できます。
-
-プロパティは親コンポーネントからの情報を伝えるためのカスタム属性です。子コンポーネントは、[`props` オプション](../api/#props)を利用して、伝達を想定するプロパティを明示的に宣言する必要があります:
-
-``` js
-Vue.component('child', {
-  // プロパティを宣言します。
-  props: ['message'],
-  // 単なるデータのように、プロパティは内部テンプレートで使用することができ、
-  // そして this.messageとして、vm の中で利用可能になります。
-  template: '<span>{{ message }}</span>'
-})
-```
-
-すると以下のようにプレーン文字列を渡すことができます:
-
-``` html
-<child message="hello!"></child>
-```
-
-結果:
-
-{% raw %}
-<div id="prop-example-1" class="demo">
-  <child message="hello!"></child>
-</div>
-<script>
-new Vue({
-  el: '#prop-example-1',
-  components: {
-    child: {
-      props: ['message'],
-      template: '<span>{{ message }}</span>'
-    }
-  }
-})
-</script>
-{% endraw %}
-
-### キャメルケース vs ケバブケース
-
-HTML の属性は大文字と小文字を区別しません。そのため、非文字列テンプレートを使用する場合、キャメルケースのプロパティ名を属性として使用するときは、それらをケバブケース (kebab-case: ハイフンで句切られた) にする必要があります:
-
-``` js
-Vue.component('child', {
-  // JavaScript ではキャメルケース
-  props: ['myMessage'],
-  template: '<span>{{ myMessage }}</span>'
-})
-```
-
-``` html
-<!-- HTML ではケバブケース -->
-<child my-message="hello!"></child>
-```
-
-繰り返しになりますが、もし文字列テンプレートを使用する場合は、この制限は適用されません。
-
-### 動的なプロパティ
-
-式に通常の属性をバインディングするのと同様に、 `v-bind` を使用して親のデータにプロパティを動的にバインディングすることもできます。親でデータが更新される度に、そのデータが子に流れ落ちます:
-
-``` html
-<div id="prop-example-2">
-  <input v-model="parentMsg">
-  <br>
-  <child v-bind:my-message="parentMsg"></child>
-</div>
-```
-
-``` js
-new Vue({
-  el: '#prop-example-2',
-  data: {
-    parentMsg: 'Message from parent'
-  }
-})
-```
-
-`v-bind` のための省略記法を使用するとよりシンプルです:
-
-``` html
-<child :my-message="parentMsg"></child>
-```
-
-結果:
-
-{% raw %}
-<div id="demo-2" class="demo">
-  <input v-model="parentMsg">
-  <br>
-  <child v-bind:my-message="parentMsg"></child>
-</div>
-<script>
-new Vue({
-  el: '#demo-2',
-  data: {
-    parentMsg: 'Message from parent'
-  },
-  components: {
-    child: {
-      props: ['myMessage'],
-      template: '<span>{{ myMessage }}</span>'
-    }
-  }
-})
-</script>
-{% endraw %}
-
-もしオブジェクト内のすべてのプロパティを props として渡したい場合、 `v-bind` を引数なしで使う（`v-bind:プロパティ名` の代わりに `v-bind`）ことができます。例えば、 `todo` オブジェクトを与えるには:
-
-``` js
-todo: {
-  text: 'Learn Vue',
-  isComplete: false
-}
-```
-
-そして:
-
-``` html
-<todo-item v-bind="todo"></todo-item>
-```
-
-これは以下と等価です:
-
-``` html
-<todo-item
-  v-bind:text="todo.text"
-  v-bind:is-complete="todo.isComplete"
-></todo-item>
-```
-
-### リテラル vs 動的
-
-初心者にありがちな誤りは、リテラル構文を使用して数を渡そうとすることです:
-
-``` html
-<!-- これは純粋な文字列"1"を渡します -->
-<comp some-prop="1"></comp>
-```
-
-しかしながら、これはリテラルなプロパティなので、その値は実際に数の代わりに純粋な文字列 `"1"`が渡されています。実際に JavaScript の数を渡したい場合は、その値が JavaScript の式として評価されるよう、`v-bind` を使う必要があります:
-
-``` html
-<!-- これは実際の数を渡します -->
-<comp v-bind:some-prop="1"></comp>
-```
-
-### 単方向データフロー
-
-すべてのプロパティは、子プロパティと親プロパティの間の**単方向 (one-way-down)** バインディングを形成します: 親プロパティが更新したとき、それは子プロパティに伝わり、その反対はありません。これは、あなたのアプリケーションのデータフローの説明を難しくしてしまうような、子コンポーネントが偶然親の状態を変化させることを防ぎます。
-
-それに加えて、親コンポーネントが更新されるたびに、子コンポーネント内のすべてのプロパティが最新の値に再読込されます。これは、子コンポーネント内部のプロパティを変更しようとするべきでないことを意味しています。もし変更しようとすると、 Vue はコンソール内で警告します。
-
-プロパティを変更したくなる 2 つのケースがあります。
-
-1. プロパティは初期値を渡すためにのみ使われ、子コンポーネントは単にその値をローカルデータプロパティとして使用したい場合
-
-2. プロパティは変換が必要な生の値として渡されます。
-
-これらのユースケースの適切な答えは:
-
-1. プロパティの初期値をその初期値とするようなローカルデータプロパティを定義します。
-
-  ``` js
-  props: ['initialCounter'],
-  data: function () {
-    return { counter: this.initialCounter }
-  }
-  ```
-
-2. プロパティの値から計算される算出プロパティ (computed property) を定義します。
-
-  ``` js
-  props: ['size'],
-  computed: {
-    normalizedSize: function () {
-      return this.size.trim().toLowerCase()
-    }
-  }
-  ```
-
-<p class="tip"> JavaScript のオブジェクトや配列は参照渡しのため、もしプロパティが配列やオブジェクトなら、子内部のオブジェクトまたは配列自身の変更は、親の状態に影響を**与えます**。</p>
-
-### プロパティ検証
-
-コンポーネントは受け取るプロパティに対する必要条件を指定することができます。もし必要条件が満たされていない場合は、 Vue は警告を出します。これは、特に他人が使用する可能性のあるコンポーネントを作るときに便利です。
-
-文字列の配列としてプロパティを定義する代わりに、検証要件を含んだオブジェクトハッシュフォーマットを使用できます:
-
-``` js
-Vue.component('example', {
-  props: {
-    // 基本な型チェック (`null` はどんな型でも受け付ける)
-    propA: Number,
-    // 複数の受け入れ可能な型
-    propB: [String, Number],
-    // 必須な文字列
-    propC: {
-      type: String,
-      required: true
-    },
-    // デフォルト値
-    propD: {
-      type: Number,
-      default: 100
-    },
-    // オブジェクトと配列のデフォルトはファクトリ関数から返すようにしています
-    propE: {
-      type: Object,
-      default: function () {
-        return { message: 'hello' }
-      }
-    },
-    // カスタムバリデータ関数
-    propF: {
-      validator: function (value) {
-        return value > 10
-      }
-    }
-  }
-})
-```
-
-`type` は次のネイティブなコンストラクタのいずれかになります:
-
-- String
-- Number
-- Boolean
-- Function
-- Object
-- Array
-- Symbol
-
-加えて、`type` はカスタムコンストラクタ関数とすることもでき、アサーションは `instanceof` チェックで作成できるでしょう。
-
-プロパティ検証が失敗すると、Vue は(開発ビルドを使用している場合)コンソールへの警告を提示します。コンポーネントインスタンスが作成される __前__ にプロパティが検証されるため、`default` や `validator` 関数内では、`data`、 `computed`、 `methods` などのインスタンスプロパティは利用できないことに注意してください。
-
-## プロパティではない属性
-
-プロパティではない属性は、コンポーネントに渡される属性ですが、対応するプロパティは定義されていません。
-
-子コンポーネントに情報を渡すために明示的に定義されたプロパティが好まれる一方で、コンポーネントライブラリの作成者は、そのコンポーネントが使用される可能性のあるコンテキストを常に予期することはできません。そのため、コンポーネントはコンポーネントのルート要素に追加される任意の属性を受け入れることができます。
-
-例えば、`input` 上の `data-3d-date-picker` 属性を必要とする Bootstrap プラグインでサードパーティの `bs-date-input` コンポーネントを使用しているとします。この属性をコンポーネントインスタンスに追加することができます:
-
-``` html
-<bs-date-input data-3d-date-picker="true"></bs-date-input>
-```
-
-そして、`data-3d-date-picker="true"` 属性は自動的に `bs-date-input` のルート要素に追加されます。
-
-### 既存属性による置換/マージ
-
-これが `bs-date-input` のテンプレートとしましょう:
-
-``` html
-<input type="date" class="form-control">
-```
-
-date picker プラグインのテーマを指定するには、次のような特定のクラスを追加する必要があります:
-
-``` html
-<bs-date-input
-  data-3d-date-picker="true"
-  class="date-picker-theme-dark"
-></bs-date-input>
-```
-
-このケースでは、 `class` の 2 つの異なる値が定義されます:
-
-- テンプレート内のコンポーネントによって設定される `form-control`
-- 親によってコンポーネントに渡される `date-picker-theme-dark`
-
-ほとんどの属性では、コンポーネントに設定されている値が、コンポーネントに提供された値に置き換えられます。例えば、`type="large"` を渡すと、`type="date"` が置換され、恐らく壊れるでしょう！幸いにも、`class` と `style` 属性は少し賢いので、両方の値がマージされ最終的な値は `form-control date-picker-theme-dark`です:
-
-## カスタムイベント
-
-親が子にプロパティを使用してデータを伝達できることを学んできました。しかし、何かが起こったとき、どのように親へ通信するのでしょうか？そこで Vue のカスタムイベントの出番です。
-
-### カスタムイベントとの `v-on` の使用
-
-すべての Vue インスタンスは [イベントインターフェイス](../api/#インスタンスメソッド-イベント) を実装しています。これは以下をできることを意味します:
-
-- `$on(eventName)`を使用してイベントを購読します。
-- `$emit(eventName, optionalPayload)`を使用して自身にイベントをトリガします。
-
-<p class="tip">Vue のカスタムイベントはブラウザの [EventTarget API](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) とは別ものであることに注意してください。同等に動作しますが、`$on` と `$emit` は `addEventListener` と `dispatchEvent` に対するエイリアスでは__ありません__。</p>
-
-それに加えて、親コンポーネントは、子コンポーネントが使われているテンプレート内で直接 `v-on` を使用することで、子コンポーネントからのイベントを購読することができます。
-
-<p class="tip">子で発行されたイベントを購読するために `$on` を使用することはできません。以下の例のように、テンプレートでは直接 `v-on` を使用しなければなりません。</p>
-
-以下が例です:
-
-``` html
-<div id="counter-event-example">
-  <p>{{ total }}</p>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-</div>
-```
-
-``` js
-Vue.component('button-counter', {
-  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
-  data: function () {
-    return {
-      counter: 0
-    }
-  },
-  methods: {
-    incrementCounter: function () {
-      this.counter += 1
-      this.$emit('increment')
-    }
-  },
-})
-
-new Vue({
-  el: '#counter-event-example',
-  data: {
-    total: 0
-  },
-  methods: {
-    incrementTotal: function () {
-      this.total += 1
-    }
-  }
-})
-```
-
-{% raw %}
-<div id="counter-event-example" class="demo">
-  <p>{{ total }}</p>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-</div>
-<script>
-Vue.component('button-counter', {
-  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
-  data: function () {
-    return {
-      counter: 0
-    }
-  },
-  methods: {
-    incrementCounter: function () {
-      this.counter += 1
-      this.$emit('increment')
-    }
-  }
-})
-new Vue({
-  el: '#counter-event-example',
-  data: {
-    total: 0
-  },
-  methods: {
-    incrementTotal: function () {
-      this.total += 1
-    }
-  }
-})
-</script>
-{% endraw %}
-
-この例では、子コンポーネントはその外で起こったこととはまだ完全に分離しているということに注目することが大切です。子コンポーネントが唯一行っていることは、親コンポーネントが監視している場合に備えて、自分自身の活動に関する情報を報告することです。
-
-
-ペイロードデータを使用する方法の例がこちらです:
-
-``` html
-<div id="message-event-example" class="demo">
-  <p v-for="msg in messages">{{ msg }}</p>
-  <button-message v-on:message="handleMessage"></button-message>
-</div>
-```
-
-``` js
-Vue.component('button-message', {
-  template: `<div>
-    <input type="text" v-model="message" />
-    <button v-on:click="handleSendMessage">Send</button>
-  </div>`,
-  data: function () {
-    return {
-      message: 'test message'
-    }
-  },
-  methods: {
-    handleSendMessage: function () {
-      this.$emit('message', { message: this.message })
-    }
-  }
-})
-
-new Vue({
-  el: '#message-event-example',
-  data: {
-    messages: []
-  },
-  methods: {
-    handleMessage: function (payload) {
-      this.messages.push(payload.message)
-    }
-  }
-})
-```
-
-{% raw %}
-<div id="message-event-example" class="demo">
-  <p v-for="msg in messages">{{ msg }}</p>
-  <button-message v-on:message="handleMessage"></button-message>
-</div>
-<script>
-Vue.component('button-message', {
-  template: `<div>
-    <input type="text" v-model="message" />
-    <button v-on:click="handleSendMessage">Send</button>
-  </div>`,
-  data: function () {
-    return {
-      message: 'test message'
-    }
-  },
-  methods: {
-    handleSendMessage: function () {
-      this.$emit('message', { message: this.message })
-    }
-  }
-})
-new Vue({
-  el: '#message-event-example',
-  data: {
-    messages: []
-  },
-  methods: {
-    handleMessage: function (payload) {
-      this.messages.push(payload.message)
-    }
-  }
-})
-</script>
-{% endraw %}
-
-この2番目の例では、子コンポーネントが外部で起きていることから完全に切り離されていることに注意することが重要です。子コンポーネントが唯一行っていることは、親コンポーネントが監視している場合に備えて、イベントエミッターへのペイロードデータを含む自分自身のアクティビティに関する情報を報告することです。
-
-### ネイティブイベントとコンポーネントのバインディング
-
-コンポーネントの root 要素でのネイティブイベントを購読したいときがあるかもしれません。このような場合、`v-on` に `.native` 修飾子を使用することができます。例:
-
-``` html
-<my-component v-on:click.native="doTheThing"></my-component>
-```
-
-### `.sync` 修飾子
-
-> 2.3.0 から
-
-あるケースにおいては、プロパティに対して "双方向バインディング" が必要になるかもしれません。実際 Vue 1.x では、これは `.sync` 修飾子を提供したことで正にそうでした。子コンポーネントが `.sync` を持つプロパティを変更すると、値の変更は親に反映されます。これは便利ですが、単一方向のデータフローを破るため、長期的においてメンテナンスの問題につながります。子プロパティを変更するコードは暗黙的に親の状態に影響を及ぼします。
-
-これが、2.0 がリリースされたときに `.sync` 修飾子を削除した理由です。しかしながら、特に再利用可能なコンポーネントをリリースする場合には、それが実際に有用な場合があることが分かりました。私たちは、**親の状態に、より一貫性と明示性の影響を与える子のコードを作成する**変更が必要です。
-
-2.3 では、プロパティに対する `.sync` 修飾子を再導入しましたが、今回はさらに `v-on` リスナーに自動的に展開される、まさしく糖衣構文です:
-
-以下は
-
-``` html
-<comp :foo.sync="bar"></comp>
-```
-
-以下に展開されます:
-
-``` html
-<comp :foo="bar" @update:foo="val => bar = val"></comp>
-```
-
-子コンポーネントが `foo` の値を更新するためには、プロパティの変更の代わりに明示的にイベントを送出する必要があります:
-
-``` js
-this.$emit('update:foo', newValue)
-```
-
-`.sync` 修飾子は、オブジェクトを使用して複数のプロパティを一度に設定するときに `v-bind` とともに使うこともできます:
-
-```html
-<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>
-```
-
-これは `foo` と `bar`の両方に対して `v-on` アップデートリスナーを追加する効果があります。
-
-### カスタムイベントを使用したフォーム入力コンポーネント
-
-カスタムイベントは、`v-model`とともに動く、カスタムフォーム入力を作成するためにも使用されます。以下を思い出しましょう:
-
-``` html
-<input v-model="something">
-```
-
-は、以下の糖衣構文です:
-
-``` html
-<input
-  v-bind:value="something"
-  v-on:input="something = $event.target.value">
-```
-
-コンポーネントと共に使用されるとき、代わりにこのように簡単にできます:
-
-``` html
-<custom-input
-  :value="something"
-  @input="value => { something = value }">
-</custom-input>
-```
-
-そのため、コンポーネントを `v-model` と共に動かすためには、以下が必要です (これらは 2.2.0 以降で設定することができます):
-
-- `value` プロパティを受け入れる
-- 新しい値と共に `input` イベントを送出する
-
-とても簡単な通貨入力で、実行して見てみましょう:
-
-``` html
-<currency-input v-model="price"></currency-input>
-```
-
-``` js
-Vue.component('currency-input', {
-  template: '\
-    <span>\
-      $\
-      <input\
-        ref="input"\
-        v-bind:value="value"\
-        v-on:input="updateValue($event.target.value)">\
-    </span>\
-  ',
-  props: ['value'],
-  methods: {
-    // 値を直接的に更新する代わりに、このメソッドを使用して input の
-    // 値の整形と値に対する制約が行われる
-    updateValue: function (value) {
-      var formattedValue = value
-        // 両端のスペースを削除
-        .trim()
-        // 小数点2桁以下まで短縮
-        .slice(
-          0,
-          value.indexOf('.') === -1
-            ? value.length
-            : value.indexOf('.') + 3
-        )
-      // 値が既に正規化されていないならば、
-      // 手動で適合するように上書き
-      if (formattedValue !== value) {
-        this.$refs.input.value = formattedValue
-      }
-      // input イベントを通して数値を発行する
-      this.$emit('input', Number(formattedValue))
-    }
-  }
-})
-```
-
-{% raw %}
-<div id="currency-input-example" class="demo">
-  <currency-input v-model="price"></currency-input>
-</div>
-<script>
-Vue.component('currency-input', {
-  template: '\
-    <span>\
-      $\
-      <input\
-        ref="input"\
-        v-bind:value="value"\
-        v-on:input="updateValue($event.target.value)"\
-      >\
-    </span>\
-  ',
-  props: ['value'],
-  methods: {
-    updateValue: function (value) {
-      var formattedValue = value
-        .trim()
-        .slice(
-          0,
-          value.indexOf('.') === -1
-            ? value.length
-            : value.indexOf('.') + 3
-        )
-      if (formattedValue !== value) {
-        this.$refs.input.value = formattedValue
-      }
-      this.$emit('input', Number(formattedValue))
-    }
-  }
-})
-new Vue({
-  el: '#currency-input-example',
-  data: { price: '' }
-})
-</script>
-{% endraw %}
-
-上記の実装は、かなり素朴です。例えば、複数のピリオドや文字を入力することができます。うわっ！そこで、自明でない例を見たい人は、より堅固な通貨フィルタが以下にあります:
-
-<iframe width="100%" height="300" src="https://jsfiddle.net/chrisvfritz/1oqjojjx/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-### コンポーネントの `v-model` のカスタマイズ
-
-> 2.2.0 から新規
-
-デフォルトでは、コンポーネントにおける `v-model` は、 `value` をプロパティとして、 `input` をイベントとして用います。しかし、チェックボックスやラジオボタンなどの入力タイプを利用する場合は、 `value` プロパティをその他の目的で利用することができます。その際、 `model` オプションを利用することで、値の競合を避けることが可能です:
-
-``` js
-Vue.component('my-checkbox', {
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  props: {
-    checked: Boolean,
-    // これによって、 `value` プロパティを別の目的で利用することを許可します。
-    value: String
-  },
-  // ...
-})
-```
-
-``` html
-<my-checkbox v-model="foo" value="some value"></my-checkbox>
-```
-
-上記は以下と同じです:
-
-``` html
-<my-checkbox
-  :checked="foo"
-  @change="val => { foo = val }"
-  value="some value">
-</my-checkbox>
-```
-
-<p class="tip">`checked` プロパティを明示的に宣言しなければならないことに注意してください。</p>
-
-### 親子間以外の通信
-
-ときどき、互いに親子関係ではない2つのコンポーネントが互いに通信する必要があるかもしれません。簡単なシナリオとして、空の Vue インスタンスを中心のイベントバスとして使用することができます:
-
-``` js
-var bus = new Vue()
-```
-``` js
-// コンポーネント A のメソッドの中で
-bus.$emit('id-selected', 1)
-```
 ``` js
-// コンポーネント B の created フックで
-bus.$on('id-selected', function (id) {
-  // ...
+// button-counter と呼ばれる新しいコンポーネントを定義します
+Vue.component('button-counter', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
 })
 ```
 
-より複雑なケースでは、専用の [状態管理パターン](state-management.html) 採用することを考えるべきです。
-
-## スロットによるコンテンツ配信
-
-複数のコンポーネントを使用するとき、しばしばそれらをこのように構成したくなります:
-
-``` html
-<app>
-  <app-header></app-header>
-  <app-footer></app-footer>
-</app>
-```
-
-ここに言及すべきことが 2 つあります:
-
-1. `<app>` コンポーネントはどのコンテンツを受け取るのか分かりません。そのコンポーネントが `<app>` を使用することによって決定されます。
-
-2. `<app>` コンポーネントはほぼ必ず独自のテンプレートを持っています。
-
-コンポーネントの構造を動作させるためには、親の"コンテンツ"とそのコンポーネント自身のテンプレートを織り交ぜる方法が必要です。これは"コンテンツ配信"(または、Angular に精通している場合は "transclusion")と呼ばれるプロセスです。Vue.js はオリジナルコンテンツに対する配信アウトレットとして機能する特別な `<slot>` 要素を使用して、現行の [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) にならったコンテンツ配信 API を実装します。
+コンポーネントは名前付きの再利用可能な Vue インスタンスです。この例の場合、`<button-counter>`です。このコンポーネントを `new Vue` で作成されたルート Vue インスタンス内でカスタム要素として使用することができます。
 
-### コンパイルスコープ
-
-API を掘り下げる前に、はじめにコンテンツがコンパイルされているスコープを明確にしましょう。このようなテンプレートを考えてみてください:
-``` html
-<child-component>
-  {{ message }}
-</child-component>
+```html
+<div id="components-demo">
+  <button-counter></button-counter>
+</div>
 ```
 
-`message` は親のデータと子のデータのどちらに束縛されるべきでしょうか？答えは親です。コンポーネントスコープに対するシンプルな経験則:
-
-> 親テンプレート内の全てのものは親のスコープでコンパイルされ、子テンプレート内の全てものは子のスコープでコンパイルされる
-
-よくある間違いは、親テンプレート内の子のプロパティ/メソッドにディレクティブを束縛しようとすることです:
-
-``` html
-<!-- 動作しません -->
-<child-component v-show="someChildProperty"></child-component>
+```js
+new Vue({ el: '#components-demo' })
 ```
 
-`someChildProperty` は子コンポーネントのプロパティと仮定すると、上記の例は動作しないでしょう。親のテンプレートは子コンポーネントの状態について認識していません。
-
-コンポーネントで子スコープのディレクティブに束縛する必要がある場合、子コンポーネント自身のテンプレートにおいてそうすべきです:
-
-``` js
-Vue.component('child-component', {
-  // 正しいスコープであるため、これは動作します
-  template: '<div v-show="someChildProperty">Child</div>',
+{% raw %}
+<div id="components-demo" class="demo">
+  <button-counter></button-counter>
+</div>
+<script>
+Vue.component('button-counter', {
   data: function () {
     return {
-      someChildProperty: true
+      count: 0
     }
-  }
+  },
+  template: '<button v-on:click="count += 1">You clicked me {{ count }} times.</button>'
 })
-```
-
-同様に、配信コンテンツは親スコープでコンパイルされます。
-
-### 単一スロット
-
-親コンテンツは子コンポーネントのテンプレートが少なくとも 1 つの `<slot>` アウトレットを含んでいない限り**破棄されます**。属性なしのスロットが 1 つだけあるときは、全コンテンツはスロットそのものを置き換え、DOM 内のその位置に挿入されます。
-
-`<slot>` タグ内に元々あった全てのものは、**フォールバックコンテンツ**と見なされます。フォールバックコンテンツは子スコープでコンパイルされ、ホストしている要素が空で挿入されるコンテンツがない場合にのみ、表示されます。
+new Vue({ el: '#components-demo' })
+</script>
+{% endraw %}
 
-`my-component` と呼ばれる以下のテンプレートによるコンポーネントがあるとします。
+コンポーネントは再利用可能な Vue インスタンスなので、`data`、`computed`、`watch`、`methods`、ライフサイクルフックなどの `new Vue` と同じオプションを受け入れます。唯一の例外は `el` のようなルート固有のオプションです。
 
-``` html
-<div>
-  <h2>I'm the child title</h2>
-  <slot>
-    This will only be displayed if there is no content
-    to be distributed.
-  </slot>
-</div>
-```
+## コンポーネントの再利用
 
-コンポーネントを使用した親は以下になります:
+コンポーネントは必要なだけ何度でも再利用できます:
 
-``` html
-<div>
-  <h1>I'm the parent title</h1>
-  <my-component>
-    <p>This is some original content</p>
-    <p>This is some more original content</p>
-  </my-component>
+```html
+<div id="components-demo">
+  <button-counter></button-counter>
+  <button-counter></button-counter>
+  <button-counter></button-counter>
 </div>
 ```
 
-描画された結果は以下になります:
-
-``` html
-<div>
-  <h1>I'm the parent title</h1>
-  <div>
-    <h2>I'm the child title</h2>
-    <p>This is some original content</p>
-    <p>This is some more original content</p>
-  </div>
+{% raw %}
+<div id="components-demo2" class="demo">
+  <button-counter></button-counter>
+  <button-counter></button-counter>
+  <button-counter></button-counter>
 </div>
-```
-
-### 名前付きスロット
+<script>
+new Vue({ el: '#components-demo2' })
+</script>
+{% endraw %}
 
-`<slot>` 要素は特別な属性 `name` を持ち、コンテンツを配信する方法をカスタマイズするために使用できます。異なる名前で複数のスロットを持つことができます。名前付きスロットは、コンテンツ内の対応する `slot` 属性を持つ任意の要素にマッチします。
+ボタンをクリックすると、それぞれが独自の `カウント` を保持することに注意してください。これはコンポーネントを使用するたびに、新しい**インスタンス**が作成されるためです。
 
-マッチしなかったコンテンツのためのキャッチオールアウトレットの機能を持つ**デフォルトスロット**として、名前無しのスロットを残すことができます。デフォルトスロットがない場合は、マッチしなかったコンテンツは破棄されます。
+### `data` は関数でなければなりません
 
-例として、以下のテンプレートのような、`app-layout` コンポーネントがあると仮定します:
+`<button-counter>`コンポーネントを定義したとき、`data` が直接オブジェクトとして提供されていなかったことに気づいたかもしれません:
 
-``` html
-<div class="container">
-  <header>
-    <slot name="header"></slot>
-  </header>
-  <main>
-    <slot></slot>
-  </main>
-  <footer>
-    <slot name="footer"></slot>
-  </footer>
-</div>
+```js
+data: {
+  count: 0
+}
 ```
 
-親のマークアップは以下です:
-
-``` html
-<app-layout>
-  <h1 slot="header">Here might be a page title</h1>
-
-  <p>A paragraph for the main content.</p>
-  <p>And another one.</p>
+代わりに、**コンポーネントの `data` オプションは関数でなければなりません**。各インスタンスが返されるデータオブジェクトの独立したコピーを保持できるためです:
 
-  <p slot="footer">Here's some contact info</p>
-</app-layout>
+```js
+data: function () {
+  return {
+    count: 0
+  }
+}
 ```
 
-描画された結果は以下になります:
+Vue にこのルールがない場合、ボタンを1つクリックすると、以下のように_すべての他のインスタンスの_データに影響します:
 
-``` html
-<div class="container">
-  <header>
-    <h1>Here might be a page title</h1>
-  </header>
-  <main>
-    <p>A paragraph for the main content.</p>
-    <p>And another one.</p>
-  </main>
-  <footer>
-    <p>Here's some contact info</p>
-  </footer>
+{% raw %}
+<div id="components-demo3" class="demo">
+  <button-counter2></button-counter2>
+  <button-counter2></button-counter2>
+  <button-counter2></button-counter2>
 </div>
-```
-
-コンテンツ配信 API は、組み合わせて使うことを意図したコンポーネントを設計する際に、非常に便利なメカニズムです。
-
-### スコープ付きスロット
+<script>
+var buttonCounter2Data = {
+  count: 0
+}
+Vue.component('button-counter2', {
+  data: function () {
+    return buttonCounter2Data
+  },
+  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
+})
+new Vue({ el: '#components-demo3' })
+</script>
+{% endraw %}
 
-> 2.1.0 から新規
+## コンポーネントの編成
 
-スコープ付きスロット (scoped slot) は、既に描画された要素の代わりに再利用可能なテンプレート(データを渡すことができる)として機能する特殊なタイプのスロットです。
+アプリケーションがネストされたコンポーネントのツリーに編成されるのは一般的です:
 
-子コンポーネントでは、コンポーネントにプロパティを渡すかのように、単純にデータをスロットに渡します:
+![Component Tree](/images/components.png)
 
-``` html
-<div class="child">
-  <slot text="hello from child"></slot>
-</div>
-```
+例えば、ヘッダー、サイドバー、およびコンテンツ領域のコンポーネントがあり、それぞれには一般的にナビゲーションリンク、ブログ投稿などの他のコンポーネントが含まれています。
 
-親においては、特別な属性 `slot-scope` を持つ `<template>` 要素が存在しなければならず、これはスコープ付きスロット用のテンプレートを示します。`slot-scope` の値は、子から渡された props オブジェクトを保持する一時変数の名前として使用されます:
+これらのコンポーネントをテンプレートで使用するには、Vue がそれらを認識できるように登録する必要があります。コンポーネント登録には、**グローバル**と**ローカル**の2種類があります。これまでは、`Vue.component` を使用してコンポーネントをグローバルに登録していただけです:
 
-``` html
-<div class="parent">
-  <child>
-    <template slot-scope="props">
-      <span>hello from parent</span>
-      <span>{{ props.text }}</span>
-    </template>
-  </child>
-</div>
+```js
+Vue.component('my-component-name', {
+  // ... オプション ...
+})
 ```
 
-上記のように描画すると、出力は次のようになります:
-
-``` html
-<div class="parent">
-  <div class="child">
-    <span>hello from parent</span>
-    <span>hello from child</span>
-  </div>
-</div>
-```
+グローバルに登録されたコンポーネントは、その後に作成されたルート Vue インスタンス(`new Vue`)のテンプレートで使用できます。さらに、その Vue インスタンスのコンポーネントツリーのすべてのサブコンポーネント内でも使用できます。
 
-> 2.5.0 以降では、`slot-scope` はもはや`<template>` に限定されず、どの要素やコンポーネントでも使用できます。
+今のところコンポーネント登録について知っておくべきことはこれですべてですが、このページを読んで内容が分かり次第、[コンポーネント登録](components-registration.html)の全ガイドを読むことをお勧めします。
 
-スコープ付きスロットのより一般的なユースケースは、コンポーネント利用者がリスト内の各アイテムの描画方法をカスタマイズできるようにする、リストコンポーネントでしょう:
+## プロパティを使用した子コンポーネントへのデータの受け渡し
 
-``` html
-<my-awesome-list :items="items">
-  <!-- スコープ付きスロットにも名前をつけることができます -->
-  <li
-    slot="item"
-    slot-scope="props"
-    class="my-fancy-item">
-    {{ props.text }}
-  </li>
-
-</my-awesome-list>
-```
+先程、ブログ投稿用のコンポーネントの作成についてふれました。問題は、表示する特定の投稿のタイトルやコンテンツなどのデータをコンポーネントに渡すことができない限り、そのコンポーネントは役に立たないということです。プロパティはここで役立ちます。
 
-リストコンポーネントのテンプレートでは次のようになります:
+プロパティはコンポーネントに登録できるカスタム属性です。値がプロパティ属性に渡されると、そのコンポーネントインスタンスのプロパティになります。ブログ投稿コンポーネントにタイトルを渡すには、`props` オプションを使用して、このコンポーネントが受け入れるプロパティのリストにそれを含めることができます:
 
-``` html
-<ul>
-  <slot name="item"
-    v-for="item in items"
-    :text="item.text">
-    <!-- フォールバックコンテンツはここへ -->
-  </slot>
-</ul>
+```js
+Vue.component('blog-post', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
+})
 ```
 
-#### 分割代入
+コンポーネントは必要に応じて多くのプロパティを持つことができます。デフォルトでは、任意の値を任意のプロパティに渡すことができます。上記のテンプレートでは、`data` と同様に、コンポーネントインスタンスでこの値にアクセスできることがわかります。
 
-`slot-scope` の値は実際には関数シグネチャの引数位置に表示できる有効な JavaScript 式です。これは、式で ES2015 destructuring を使用できる環境(単一ファイルコンポーネントまたはモダンなブラウザ)をサポートすることを意味します:
+プロパティが登録されると、次のようにそれをカスタム属性としてデータを渡すことができます:
 
-``` html
-<child>
-  <span slot-scope="{ text }">{{ text }}</span>
-</child>
+```html
+<blog-post title="My journey with Vue"></blog-post>
+<blog-post title="Blogging with Vue"></blog-post>
+<blog-post title="Why Vue is so fun"></blog-post>
 ```
 
-## 動的コンポーネント
+{% raw %}
+<div id="blog-post-demo" class="demo">
+  <blog-post1 title="My journey with Vue"></blog-post1>
+  <blog-post1 title="Blogging with Vue"></blog-post1>
+  <blog-post1 title="Why Vue is so fun"></blog-post1>
+</div>
+<script>
+Vue.component('blog-post1', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
+})
+new Vue({ el: '#blog-post-demo' })
+</script>
+{% endraw %}
 
-予約された `<component>` 要素と、その `is` 属性に動的に束縛することで、同じマウントポイントで複数のコンポーネントを動的に切り替えることができます:
+しかしながら、普通のアプリケーションでは、おそらく `data` に投稿の配列があります:
 
-``` js
-var vm = new Vue({
-  el: '#example',
+```js
+new Vue({
+  el: '#blog-post-demo',
   data: {
-    currentView: 'home'
-  },
-  components: {
-    home: { /* ... */ },
-    posts: { /* ... */ },
-    archive: { /* ... */ }
+    posts: [
+      { id: 1, title: 'My journey with Vue' },
+      { id: 2, title: 'Blogging with Vue' },
+      { id: 3, title: 'Why Vue is so fun' },
+    ]
   }
 })
 ```
 
-``` html
-<component v-bind:is="currentView">
-  <!-- vm.currentview が変更されると、中身が変更されます! -->
-</component>
-```
-
-もしお好みならば、コンポーネントオブジェクトを直接束縛することもできます:
-
-``` js
-var Home = {
-  template: '<p>Welcome home!</p>'
-}
+それぞれの投稿ごとにコンポーネントを描画します:
 
-var vm = new Vue({
-  el: '#example',
-  data: {
-    currentView: Home
-  }
-})
+```html
+<blog-post
+  v-for="post in posts"
+  v-bind:key="post.id"
+  v-bind:title="post.title"
+></blog-post>
 ```
 
-### `keep-alive`
+上記では、`v-bind` を使って動的にプロパティを渡すことができることがわかります。これは、[API から投稿を取得する](https://jsfiddle.net/chrisvfritz/sbLgr0ad)ときのように、前もって描画する正確なコンテンツがわからない場合に特に便利です。
 
-状態を保持したり再描画を避けたりするために、もし切り替えで取り除かれたコンポーネントを生きた状態で保持したい場合は、`<keep-alive>` 要素のなかで動的コンポーネントを抱合(wrap)することができます。
+これがプロパティについて今のところ知っておくべきことですが、このページを読んで内容が分かり次第、後で[プロパティ](components-props.html)の全ガイドを読むことをお勧めします。
 
-``` html
-<keep-alive>
-  <component :is="currentView">
-      <!-- 非活性になったコンポーネントをキャッシュします! -->
-  </component>
-</keep-alive>
-```
+## 単一のルート要素
 
-`<keep-alive>` のさらなる詳細については、[API リファレンス](../api/#keep-alive) を確認してください。
+`<blog-post>`コンポーネントを構築するとき、テンプレートには最終的にタイトル以上のものが含まれます:
 
-## その他
+```html
+<h3>{{ post.title }}</h3>
+```
 
-### 再利用可能なコンポーネントの作成
+最低でも、投稿の内容を含めたいでしょう:
 
-コンポーネントを作成するとき、あとでこのコンポーネントをどこかほかの箇所で再利用するつもりかどうかを心に留めておくとよいでしょう。一度限りのコンポーネントが密に結びつくことは良いとしても、再利用可能なコンポーネントはきれいな公開インタフェースを定義し、どの中で使われるかに関してはなにも仮定しないようにするべきです。
+```html
+<h3>{{ post.title }}</h3>
+<div v-html="post.content"></div>
+```
 
-Vue コンポーネントのための API は、本質的に、プロパティ、イベント、スロットの3つの部分から成ります:
+テンプレートで試してみると、Vue は**すべてのコンポーネントに単一のルート要素**が必要ということを示すエラーを表示します。このエラーは、次のようにテンプレートを親要素でラップすることで修正できます:
 
-- **プロパティ** 外部環境がコンポーネントにデータを渡すことを可能にします。
+```html
+<div class="blog-post">
+  <h3>{{ post.title }}</h3>
+  <div v-html="post.content"></div>
+</div>
+```
 
-- **イベント** コンポーネントが外部環境の副作用をトリガすることを可能にします。
+## イベントとメッセージを親コンポーネントに送出する
 
-- **スロット** 外部によって追加されるコンテンツとともにコンポーネントを構成することを可能にします。
+`<blog-post>` コンポーネントを開発する際、親コンポーネントとやり取りする機能が必要になるかもしれません。例えば、ブログの投稿のテキストを拡大するためのアクセシビリティ機能を追加し、他のページのデフォルトのサイズにすることができます。
 
-`v-bind` と `v-on` 用の省略記法を使うと、意図を明確かつ簡潔にテンプレート内で伝えることができます:
+親コンポーネントでは、`postFontSize` データプロパティを追加することでこの機能をサポートすることができます:
 
-``` html
-<my-component
-  :foo="baz"
-  :bar="qux"
-  @event-a="doThis"
-  @event-b="doThat"
->
-  <img slot="icon" src="...">
-  <p slot="main-text">Hello!</p>
-</my-component>
+```js
+new Vue({
+  el: '#blog-posts-events-demo',
+  data: {
+    posts: [/* ... */],
+    postFontSize: 1
+  }
+})
 ```
 
-### 子コンポーネントの参照
+すべてのブログ投稿のフォントサイズを制御するためにテンプレート内で使用できます:
 
-プロパティやイベントの存在にもかかわらず、時には子コンポーネントに JavaScript で直接アクセスする必要があるかもしれません。それを実現するためには `ref` を用いて子コンポーネントに対して参照 ID を割り当てる必要があります。例えば:
-
-``` html
-<div id="parent">
-  <user-profile ref="profile"></user-profile>
+```html
+<div id="blog-posts-events-demo">
+  <div :style="{ fontSize: postFontSize + 'em' }">
+    <blog-post
+      v-for="post in posts"
+      v-bind:key="post.id"
+      v-bind:post="post"
+    ></blog-post>
+  </div>
 </div>
 ```
 
-``` js
-var parent = new Vue({ el: '#parent' })
-// 子コンポーネントのインスタンスへのアクセス
-var child = parent.$refs.profile
-```
-
-`ref` が `v-for` と共に使用された時は、得られる値はデータソースをミラーリングした子コンポーネントが格納されている配列になります。
+それでは、すべての投稿の内容の前にテキストを拡大するボタンを追加します:
 
-<p class="tip">`$refs` はコンポーネントが描画された後にのみ追加されます。そしてそれはリアクティブではありません。直接子コンポーネントを操作するための最終手段としての意味しかありません。テンプレートまたは算出プロパティの中での `$refs` の使用は避けるべきです。</p>
+```js
+Vue.component('blog-post', {
+  props: ['post'],
+  template: `
+    <div class="blog-post">
+      <h3>{{ post.title }}</h3>
+      <button>
+        Enlarge text
+      </button>
+      <div v-html="post.content"></div>
+    </div>
+  `
+})
+```
 
-### 非同期コンポーネント
+<p class="tip">上記の例や後に出てくる例では、JavaScript の[テンプレート文字列](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings)を使用して、複数行にわたるテンプレートをより読みやすくします。これらはインターネットエクスプローラー(IE)ではサポートされていないので、IE をサポートして、かつトランスパイル(例: Babel もしくは TypeScript を使用した)を行わない場合、代わりに[改行エスケープ](https://css-tricks.com/snippets/javascript/multiline-string-variables-in-javascript/)を使用してください。</p>
 
-大規模アプリケーションでは、アプリケーションを小さな塊に分割して、実際に必要になったときにサーバからコンポーネントをロードするだけにする必要があるかもしれません。それを簡単にするために、Vue.js ではコンポーネント定義を非同期的に解決するファクトリ関数としてコンポーネントを定義することができます。Vue はコンポーネントが実際に描画が必要になるとファクトリ関数のトリガだけ行い、将来の再描画のために結果をキャッシュします。例えば:
+問題は、このボタンがなにもしないことです:
 
-``` js
-Vue.component('async-example', function (resolve, reject) {
-  // コンポーネント定義を resolve コールバックで渡す
-  setTimeout(function () {
-    resolve({
-      template: '<div>I am async!</div>'
-    })
-  }, 1000)
-})
+```html
+<button>
+  Enlarge text
+</button>
 ```
 
-ファクトリ関数は、サーバからコンポーネント定義を取得した後で呼ばれる `resolve` コールバックを引数に持ちます。ロードが失敗したことを示すために、`reject(reason)` を呼びだすこともできます。ここでの `setTimeout` は単にデモのためのものです。どうやってコンポーネントを取得するかは完全にあなた次第です。推奨されるアプローチの 1 つは [Webpack のコード分割機能](https://webpack.js.org/guides/code-splitting/)で非同期コンポーネントを使うことです。
+ボタンをクリックすると、すべての投稿のテキストを拡大する必要があることを親コンポーネントに伝える必要があります。幸いにも、Vue インスタンスはこの問題を解決するカスタムイベントシステムを提供しています。親コンポーネントにイベントを送出するには、ビルトインの[**`$emit`** メソッド](../api/#インスタンスメソッド-イベント)を呼び出して、イベントの名前を渡します:
 
-``` js
-Vue.component('async-webpack-example', function (resolve) {
-  // この特別な require 構文は webpack に対して
-  // ビルドコードを自動的に分割し、
-  // ajaxリクエストでロードされるバンドルに
-  // するよう指示します
-  require(['./my-async-component'], resolve)
-})
+```html
+<button v-on:click="$emit('enlarge-text')">
+  Enlarge text
+</button>
 ```
 
-ファクトリ関数は `Promise` を返すこともできます。Webpack 2 + ES2015 構文を使うと以下のようにできます:
+その後、ブログ投稿コンポーネントでは、ネイティブの DOM イベントと同じように、このイベントを `v-on` でリッスンすることができます:
 
-``` js
-Vue.component(
-  'async-webpack-example',
-  // `import` 関数は `Promise` を返します
-  () => import('./my-async-component')
-)
+```html
+<blog-post
+  ...
+  v-on:enlarge-text="postFontSize += 0.1"
+></blog-post>
 ```
 
-[ローカル登録](components.html#ローカル登録)を使用するとき、`Promise` を返す関数を直接提供することもできます:
-
-``` js
+{% raw %}
+<div id="blog-posts-events-demo" class="demo">
+  <div :style="{ fontSize: postFontSize + 'em' }">
+    <blog-post
+      v-for="post in posts"
+      v-bind:key="post.id"
+      v-bind:post="post"
+      v-on:enlarge-text="postFontSize += 0.1"
+    ></blog-post>
+  </div>
+</div>
+<script>
+Vue.component('blog-post', {
+  props: ['post'],
+  template: '\
+    <div class="blog-post">\
+      <h3>{{ post.title }}</h3>\
+      <button v-on:click="$emit(\'enlarge-text\')">\
+        Enlarge text\
+      </button>\
+      <div v-html="post.content"></div>\
+    </div>\
+  '
+})
 new Vue({
-  // ...
-  components: {
-    'my-component': () => import('./my-async-component')
+  el: '#blog-posts-events-demo',
+  data: {
+    posts: [
+      { id: 1, title: 'My journey with Vue', content: '...content...' },
+      { id: 2, title: 'Blogging with Vue', content: '...content...' },
+      { id: 3, title: 'Why Vue is so fun', content: '...content...' }
+    ],
+    postFontSize: 1
   }
 })
-```
-
-<p class="tip">もしあなたが <strong>Browserify</strong> のユーザで非同期コンポーネントを使いたいとしたら、残念なことに開発者が[はっきりと](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224)非同期読み込みは Browserify では今後もサポートしない"と述べています。少なくとも公式には。 Browserify コミュニティは、既存のアプリケーションや複雑なアプリケーションに役立つ[いくつかの回避策](https://github.com/vuejs/vuejs.org/issues/620)があります。他のすべてのシナリオでは、ファーストクラスとして非同期サポートを組み込みで提供する Webpack を使用することをお勧めします。</p>
-
-### 高度な非同期コンポーネント
+</script>
+{% endraw %}
 
-> 2.3.0 から新規
+### イベントと値を送出する
 
-2.3 から、非同期コンポーネントファクトリは、次の形式のオブジェクトも返すことができます:
+イベントを特定の値付きで送出すると便利なことがあります。例えば、`<blog-post>` コンポーネントにテキストをどれだけ拡大するかを責務とさせたいかもしれません。そのような場合、`$emit` の2番目のパラメータを使ってこの値を提供することができます:
 
-``` js
-const AsyncComp = () => ({
-  // ロードするコンポーネント。Promise であるべき
-  component: import('./MyComp.vue'),
-  // 非同期コンポーネントのロード中に使用するコンポーネント
-  loading: LoadingComp,
-  // ロードが失敗した場合に使用するコンポーネント
-  error: ErrorComp,
-  // ローディングコンポーネントを表示する前に遅延する。デフォルト: 200 ms
-  delay: 200,
-  // タイムアウトが設定され越えた場合、エラーコンポーネントが表示される。
-  // デフォルト: Infinity
-  timeout: 3000
-})
+```html
+<button v-on:click="$emit('enlarge-text', 0.1)">
+  Enlarge text
+</button>
 ```
 
-`vue-router` でルートコンポーネントとして使用された場合は、これらのプロパティは、ルートナビゲーションが起こる前に非同期コンポーネントが先に解決されるため、無視されます。ルートコンポーネントに対して上記の構文を使用したい場合は、`vue-router` 2.4.0 以降を使用する必要があります。
-
-### コンポーネントの命名の慣習
+親コンポーネントでイベントをリッスンすると、送出されたイベントの値に `$event` でアクセスできます:
 
-コンポーネント(またはプロパティ)を登録する時、ケバブケース、キャメルケース、パスカルケースを使うことができます。
-
-``` js
-//コンポーネント内での定義
-components: {
-  // ケバブケースを使った登録
-  'kebab-cased-component': { /* ... */ },
-  // キャメルケースを使った登録
-  'camelCasedComponent': { /* ... */ },
-  // パスカルケースを使った登録
-  'PascalCasedComponent': { /* ... */ }
-}
+```html
+<blog-post
+  ...
+  v-on:enlarge-text="postFontSize += $event"
+></blog-post>
 ```
 
-しかし、HTML テンプレートの中では、ケバブケースを使用する必要があります。
+または、イベントハンドラがメソッドの場合:
 
-``` html
-<!-- HTMLテンプレートの中では、常にケバブケースを使用する -->
-<kebab-cased-component></kebab-cased-component>
-<camel-cased-component></camel-cased-component>
-<pascal-cased-component></pascal-cased-component>
+```html
+<blog-post
+  ...
+  v-on:enlarge-text="onEnlargeText"
+></blog-post>
 ```
 
-しかし _文字列_ テンプレートを使用するときは、大文字と小文字を区別しない HTML の制約に縛られません。このことは、テンプレートの中でも、以下を使用してコンポーネントとプロパティを参照できるということを意味します:
+値は、そのメソッドの最初のパラメータとして渡されます:
 
-- ケバブケース
-- コンポーネントがキャメルケースを使用して定義されている場合はキャメルケースまたはケバブケース
-- パスカルケースを使用して定義されている場合は、ケバブケース、キャメルケースまたはパスカルケース
-
-``` js
-components: {
-  'kebab-cased-component': { /* ... */ },
-  camelCasedComponent: { /* ... */ },
-  PascalCasedComponent: { /* ... */ }
+```js
+methods: {
+  onEnlargeText: function (enlargeAmount) {
+    this.postFontSize += enlargeAmount
+  }
 }
 ```
 
-``` html
-<kebab-cased-component></kebab-cased-component>
+### コンポーネントで `v-model` を使う
 
-<camel-cased-component></camel-cased-component>
-<camelCasedComponent></camelCasedComponent>
+カスタムイベントは `v-model` で動作するカスタム入力を作成することもできます。このことを覚えておいてください:
 
-<pascal-cased-component></pascal-cased-component>
-<pascalCasedComponent></pascalCasedComponent>
-<PascalCasedComponent></PascalCasedComponent>
+```html
+<input v-model="searchText">
 ```
 
-これは、パスカルケースが最も万能の_宣言規約_であり、ケバブケースが最も万能な_慣習規約_であることを意味します。
+これは以下と同じことです:
 
-もしコンポーネントが `slot` を介してコンテンツを伝えない場合は、名前のあとに `/` をつけることによって自己終了( self-closing )タグにすることもできます。
-
-``` html
-<my-component/>
+```html
+<input
+  v-bind:value="searchText"
+  v-on:input="searchText = $event.target.value"
+>
 ```
 
-自己終了カスタム要素は有効な HTML でなく、あなたのブラウザのネイティブパーサーはそれらを理解しないため、これは文字列テンプレートの中で_のみ_動作します。
-
+コンポーネントで使用する場合、`v-model` は代わりにこれを行います:
 
-### 再帰的なコンポーネント
+``` html
+<custom-input
+  v-bind:value="searchText"
+  v-on:input="searchText = $event"
+></custom-input>
+```
 
-コンポーネントはそのテンプレートで自分自身を再帰的に呼びだすことができます。ただし、それができるのは `name` オプションがあるときだけです:
+これを実際に動作させるためには、コンポーネント内の `<input>` は以下でなければなりません:
 
-``` js
-name: 'unique-name-of-my-component'
-```
+- `value` 属性を `value` プロパティにバインドする
+- `input` では、新しい値で独自のカスタム `input` イベントを送出します
 
-`Vue.component()` を使用してグローバルなコンポーネントを登録するとき、そのグローバル ID が自動的にコンポーネントの `name` オプションとして設定されます。
+こうなります:
 
 ```js
-Vue.component('unique-name-of-my-component', {
-  // ...
+Vue.component('custom-input', {
+  props: ['value'],
+  template: `
+    <input
+      v-bind:value="value"
+      v-on:input="$emit('input', $event.target.value)"
+    >
+  `
 })
 ```
 
-注意しないと、再帰的なコンポーネントは無限ループにつながる可能性があります:
+`v-model` はこのコンポーネントで完璧に動作するはずです:
 
-``` js
-name: 'stack-overflow',
-template: '<div><stack-overflow></stack-overflow></div>'
+```html
+<custom-input v-model="searchText"></custom-input>
 ```
 
-上記のようなコンポーネントは、"max stack size exceeded" エラーに想定されるため、再帰呼び出しは条件付きになるようにしてください。(i.e. 最終的に `false` となる `v-if` を使用します)
+これがカスタムコンポーネントについて今のところ知っておくべきことですが、このページを読んで内容が分かり次第、後で[カスタムイベント](components-custom-events.html)の全ガイドを読むことをお勧めします。
 
-### コンポーネント間の循環参照
+## スロットによるコンテンツ配信
 
-Finder  や File Explorer のようなファイルディレクトリツリーを構築しているとしましょう。以下のようなテンプレートを持つ `tree-folder` コンポーネントがあるかもしれません：
+HTML 要素と同様に、コンポーネントにコンテンツを渡すことができると便利なことがよくあります。例えば以下です:
 
 ``` html
-<p>
-  <span>{{ folder.name }}</span>
-  <tree-folder-contents :children="folder.children"/>
-</p>
+<alert-box>
+  Something bad happened.
+</alert-box>
 ```
 
-次に、以下のようなテンプレートを持つ `tree-folder-contents` コンポーネントがあるとき:
+これは以下のように描画されるでしょう:
 
-``` html
-<ul>
-  <li v-for="child in children">
-    <tree-folder v-if="child.children" :folder="child"/>
-    <span v-else>{{ child.name }}</span>
-  </li>
-</ul>
-```
-よく見ると、これらのコンポーネントは実際にお互いの子孫となり、_かつ_レンダリングツリーの祖先ということがわかります。ああ、パラドックスですね！`Vue.component` でコンポーネントをグローバルに登録すると、このパラドックスは自動的に解決されます。あなたの問題がそれで解決されたなら、ここで読むことをやめることができます。
+{% raw %}
+<div id="slots-demo" class="demo">
+  <alert-box>
+    Something bad happened.
+  </alert-box>
+</div>
+<script>
+Vue.component('alert-box', {
+  template: '\
+    <div class="demo-alert-box">\
+      <strong>Error!</strong>\
+      <slot></slot>\
+    </div>\
+  '
+})
+new Vue({ el: '#slots-demo' })
+</script>
+<style>
+.demo-alert-box {
+  padding: 10px 20px;
+  background: #f3beb8;
+  border: 1px solid #f09898;
+}
+</style>
+{% endraw %}
 
-しかしながら、__モジュールシステム__ を使用してコンポーネントを読み込む場合、例えば、Webpack または Browserify 経由では以下のようなエラーになるでしょう:
+幸いにも、この作業は Vue のカスタム `<slot>` 要素によって非常に簡単になります:
 
-```
-Failed to mount component: template or render function not defined.
+```js
+Vue.component('alert-box', {
+  template: `
+    <div class="demo-alert-box">
+      <strong>Error!</strong>
+      <slot></slot>
+    </div>
+  `
+})
 ```
 
-何が起こっているのかを説明するために、あるコンポーネント A とコンポーネント B があるとします。モジュールシステムには、A が必要ですが、最初の A は B を必要としますが、B は A を必要とし、A は B を必要とする場合は、最初に他のものを解決せずにいずれかのコンポーネントを完全に解決する方法を知らないためループになってしまいます。これを修正するには、モジュールシステムに "A は B が必要になるが、最終的には B を最初に解決する必要はない" と言うことができるポイントを与える必要があります。
+上で見たように、ただ渡したいところにスロットを追加するだけです。それだけです。終わりです！
 
-先程のケースでは、`tree-folder` コンポーネントをポイントにします。パラドックスを作成する子は、`tree-folder-contents` コンポーネントとなるため、`beforeCreate` ライフサイクルフックが登録されるまで待ちます:
+これがスロットについて今のところ知っておくべきことですが、このページを読んで内容が分かり次第、後で[スロット](components-slots.html)の全ガイドを読むことをお勧めします。
 
-``` js
-beforeCreate: function () {
-  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
+## 動的なコンポーネント
+
+タブ付きのインターフェイスのように、コンポーネント間を動的に切り替えると便利なことがあります:
+
+{% raw %}
+<div id="dynamic-component-demo" class="demo">
+  <button
+    v-for="tab in tabs"
+    v-bind:key="tab"
+    class="dynamic-component-demo-tab-button"
+    v-bind:class="{ 'dynamic-component-demo-tab-button-active': tab === currentTab }"
+    v-on:click="currentTab = tab"
+  >
+    {{ tab }}
+  </button>
+  <component
+    v-bind:is="currentTabComponent"
+    class="dynamic-component-demo-tab"
+  ></component>
+</div>
+<script>
+Vue.component('tab-home', { template: '<div>Home component</div>' })
+Vue.component('tab-posts', { template: '<div>Posts component</div>' })
+Vue.component('tab-archive', { template: '<div>Archive component</div>' })
+new Vue({
+  el: '#dynamic-component-demo',
+  data: {
+    currentTab: 'Home',
+    tabs: ['Home', 'Posts', 'Archive']
+  },
+  computed: {
+    currentTabComponent: function () {
+      return 'tab-' + this.currentTab.toLowerCase()
+    }
+  }
+})
+</script>
+<style>
+.dynamic-component-demo-tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
 }
+.dynamic-component-demo-tab-button:hover {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab-button-active {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+</style>
+{% endraw %}
+
+上記は、Vue の `<component>` 要素と 特別な属性の `is` で可能になりました:
+
+```html
+<!-- currentTabComponent が変更されたとき、コンポーネントを変更します -->
+<component v-bind:is="currentTabComponent"></component>
 ```
 
-これで問題を解決できます！
+上記の例では、`currentTabComponent` は次のいずれかを含むことができます:
 
-### インラインテンプレート
+- 登録されたコンポーネントの名前、もしくは
+- コンポーネントのオプションオブジェクト
 
-特別な属性 `inline-template` が子コンポーネントに存在するとき、配信コンテンツとして扱うよりむしろ、コンポーネントはそれをテンプレートとして内部コンテンツを使用します。これは、より柔軟なテンプレートを作成可能にします。
+完全なコードを試してみるには[この fiddle](https://jsfiddle.net/chrisvfritz/o3nycadu/)、もしくは登録された名前の代わりにコンポーネントのオプションオブジェクトをバインディングしている例となる[このバージョン](https://jsfiddle.net/chrisvfritz/b2qj69o1/)を参照してください。
 
-``` html
-<my-component inline-template>
-  <div>
-    <p>These are compiled as the component's own template.</p>
-    <p>Not parent's transclusion content.</p>
-  </div>  
-</my-component>
-```
+これが動的なコンポーネントについて今のところ知っておくべきことですが、このページを読んで内容が分かり次第、後で [動的 & 非同期コンポーネント](components-dynamic-async.html)の全ガイドを読むことをお勧めします。
 
-しかしながら、`inline-template` はテンプレートのスコープを推理するのが難しくなります。ベストプラクティスとして、`template` オプションを使用して、コンポーネント内部でテンプレートを定義するようにするか、`.vue` ファイルの `template` 要素の中で定義します。
+## DOM テンプレートパース時の警告
 
-### x-template
+`<ul>`、`<ol>`、`<table>`、`<select>`のようないくつかの HTML 要素には、それらの要素の中でどの要素が現れるかに制限があり、 `<li>`、`<tr>`、`<option>` は他の特定の要素の中にしか現れません。
 
-テンプレートを定義するもうひとつの方法は、`text/x-template` タイプとともに script 要素の中で定義するというものです。そのあと、id によってテンプレートを参照します。例:
+このような制限がある要素を持つコンポーネントを使用すると、問題が発生することがあります。例:
 
 ``` html
-<script type="text/x-template" id="hello-world-template">
-  <p>Hello hello hello</p>
-</script>
+<table>
+  <blog-post-row></blog-post-row>
+</table>
 ```
 
-``` js
-Vue.component('hello-world', {
-  template: '#hello-world-template'
-})
+カスタムコンポーネント `<blog-post-row>` は無効なコンテンツとしてつまみ出され、最終的に描画された出力にエラーが発生します。幸いにも、特別な属性の `is` は回避策を提供します:
+
+``` html
+<table>
+  <tr is="blog-post-row"></tr>
+</table>
 ```
 
-これらは大きなテンプレートを使ったデモまたは、極めて小さなアプリケーションに便利です。しかし、それ以外では避けるべきです。なぜなら、コンポーネントの定義の残りからテンプレートを分離するからです。
+**次のソースのいずれかの文字列テンプレートを使用している場合、この制限は適用され<em>ない</em>**ことに注意してください:
 
-### `v-once` を使用した安価な静的コンポーネント
+- 文字列テンプレート(例: `template： '...'`)
+- [単一ファイル(`.vue`)コンポーネント](single-file-components.html)
+- [`<script type="text/x-template">`](components-edge-cases.html＃X-Templates)
 
-Vue では、素の HTML 要素を描画するのはとても高速です。しかし、時どき、静的なコンテンツを **大量に** 含むコンポーネントがあるかもしれません。このような場合、以下のように root 要素で `v-once` ディレクティブを追加することによって、コンポーネントを一度のみ評価しキャッシュしておくことを保証することができます。
+これが動的コンポーネントについて今のところ知っておくべきことです。そして、実際には Vue の <em>本質</em> の最後となります。おめでとうございます！まだまだ学ぶことはありますが、最初に Vue を自身で遊ぶために休憩をとり、何か面白いものを作ってみることをお勧めします。
 
-``` js
-Vue.component('terms-of-service', {
-  template: '\
-    <div v-once>\
-      <h1>Terms of Service</h1>\
-      ... a lot of static content ...\
-    </div>\
-  '
-})
-```
+理解したばかりの知識に慣れたら、[動的 & 非同期コンポーネント](components-dynamic-async.html)の全ガイドとサイドバーにある他のコンポーネントの詳細セクションを読むことをお勧めします。
\ No newline at end of file
diff --git a/themes/vue/layout/partials/toc.ejs b/themes/vue/layout/partials/toc.ejs
index d5efd5529..bb96e0e60 100644
--- a/themes/vue/layout/partials/toc.ejs
+++ b/themes/vue/layout/partials/toc.ejs
@@ -5,6 +5,9 @@
       <% if (fileName === 'installation') { %>
         <li><h3>基本的な使い方</h3></li>
       <% } %>
+      <% if (fileName === 'components-registration') { %>
+        <li><h3>Components In-Depth</h3></li>
+      <% } %>
       <% if (fileName === 'transitions') { %>
         <li><h3>トランジションとアニメーション</h3></li>
       <% } %>
diff --git a/themes/vue/source/css/_demo.styl b/themes/vue/source/css/_demo.styl
index f53c05cb9..f940d9b93 100644
--- a/themes/vue/source/css/_demo.styl
+++ b/themes/vue/source/css/_demo.styl
@@ -14,6 +14,11 @@
   h1
     margin: 0 0 .5em
     font-size: 1.8em
+  h2
+    padding: 0
+    border: none
+  h2, h3, h4, h5, h6
+    margin: 1em 0
   ul, ol
     padding-left: 1.5em
     padding-bottom: .2em !important
@@ -34,13 +39,13 @@
   p
     margin: 0 !important
     padding: 0 !important
-    &:first-child
-      margin-top: 0
-    &:last-child
-      margin-bottom: 0
   textarea
     width: 100%
     resize: vertical
+  > :first-child
+    margin-top: 0
+  > :last-child
+    margin-bottom: 0
 
 
 ul#demo, ul.demo
@@ -66,4 +71,4 @@ ul#demo, ul.demo
     page-break-inside: avoid
     padding: 1em
     margin-bottom: 1em
-    border-width: 2px
\ No newline at end of file
+    border-width: 2px
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index 3b31f187e..a29a8a45d 100644
--- a/themes/vue/source/js/common.js
+++ b/themes/vue/source/js/common.js
@@ -1,4 +1,5 @@
 (function () {
+  initHashLevelRedirects()
   initMobileMenu()
   initVideoModal()
   if (PAGE_TYPE) {
@@ -8,6 +9,95 @@
     initLocationHashFuzzyMatching()
   }
 
+  // Most redirects should be specified in Hexo's
+  // _config.yml. However, it can't handle hash-level
+  // redirects, such as:
+  //
+  // /foo#hello -> /bar#hello
+  //
+  // For these cases where a section on one page has
+  // moved to a perhaps differently-named section on
+  // another page, we need this.
+  function initHashLevelRedirects() {
+    checkForHashRedirect(/components\.html$/, {
+      'What-are-Components': '/v2/guide/components.html',
+      'Using-Components': '/v2/guide/components-registration.html',
+      'Global-Registration':
+        '/v2/guide/components-registration.html#Global-Registration',
+      'Local-Registration':
+        '/v2/guide/components-registration.html#Local-Registration',
+      'Composing-Components':
+        '/v2/guide/components.html#Organizing-Components',
+      Props:
+        '/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props',
+      'Passing-Data-with-Props':
+        '/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props',
+      'camelCase-vs-kebab-case':
+        '/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case',
+      'Dynamic-Props':
+        '/v2/guide/components-props.html#Static-and-Dynamic-Props',
+      'Literal-vs-Dynamic':
+        '/v2/guide/components-props.html#Static-and-Dynamic-Props',
+      'One-Way-Data-Flow':
+        '/v2/guide/components-props.html#One-Way-Data-Flow',
+      'Prop-Validation': '/v2/guide/components-props.html#Prop-Validation',
+      'Non-Prop-Attributes':
+        '/v2/guide/components-props.html#Non-Prop-Attributes',
+      'Replacing-Merging-with-Existing-Attributes':
+        '/v2/guide/components-props.html#Replacing-Merging-with-Existing-Attributes',
+      'Custom-Events':
+        '/v2/guide/components.html#Sending-Messages-to-Parents-with-Events',
+      'Using-v-on-with-Custom-Events':
+        '/v2/guide/components.html#Sending-Messages-to-Parents-with-Events',
+      'Binding-Native-Events-to-Components':
+        '/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components',
+      'sync-Modifier':
+        '/v2/guide/components-custom-events.html#sync-Modifier',
+      'Form-Input-Components-using-Custom-Events':
+        '/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components',
+      'Customizing-Component-v-model':
+        '/v2/guide/components-custom-events.html#Customizing-Component-v-model',
+      'Non-Parent-Child-Communication': '/v2/guide/state-management.html',
+      'Compilation-Scope':
+        '/v2/guide/components-slots.html#Compilation-Scope',
+      'Single-Slot': '/v2/guide/components-slots.html#Slot-Content',
+      'Named-Slots': '/v2/guide/components-slots.html#Named-Slots',
+      'Scoped-Slots': '/v2/guide/components-slots.html#Scoped-Slots',
+      'Dynamic-Components': '/v2/guide/components.html#Dynamic-Components',
+      'keep-alive':
+        '/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components',
+      Misc: '/v2/guide/components-edge-cases.html',
+      'Authoring-Reusable-Components':
+        '/v2/guide/components.html#Organizing-Components',
+      'Child-Component-Refs':
+        '/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements',
+      'Async-Components':
+        '/v2/guide/components-dynamic-async.html#Async-Components',
+      'Advanced-Async-Components':
+        '/v2/guide/components-dynamic-async.html#Handling-Loading-State',
+      'Component-Naming-Conventions':
+        '/v2/guide/components-registration.html#Component-Names',
+      'Recursive-Components':
+        '/v2/guide/components-edge-cases.html#Recursive-Components',
+      'Circular-References-Between-Components':
+        '/v2/guide/components-edge-cases.html#Circular-References-Between-Components',
+      'Inline-Templates':
+        '/v2/guide/components-edge-cases.html#Inline-Templates',
+      'X-Templates': '/v2/guide/components-edge-cases.html#X-Templates',
+      'Cheap-Static-Components-with-v-once':
+        '/v2/guide/components-edge-cases.html#Cheap-Static-Components-with-v-once'
+    })
+    function checkForHashRedirect(pageRegex, redirects) {
+      // Abort if the current page doesn't match the page regex
+      if (!pageRegex.test(window.location.pathname)) return
+
+      var redirectPath = redirects[window.location.hash.slice(1)]
+      if (redirectPath) {
+        window.location.href = window.location.origin + redirectPath
+      }
+    }
+  }
+
   function initApiSpecLinks () {
     var apiContent = document.querySelector('.content.api')
     if (apiContent) {
@@ -257,7 +347,17 @@
       }, true)
 
       // make links clickable
-      allHeaders.forEach(makeHeaderClickable)
+      allHeaders
+        .filter(function(el) {
+          if (!el.querySelector('a')) {
+            return false
+          }
+          var demos = [].slice.call(document.querySelectorAll('demo'))
+          return !demos.some(function(demoEl) {
+            return demoEl.contains(el)
+          })
+        })
+        .forEach(makeHeaderClickable)
 
       // init smooth scroll
       smoothScroll.init({