Event

• Parent -> Child : Pass props
• Parent <- Child : Emit events

this.$emit

props

v-model

v-sync

• see more details

<template>
  <child v-bind:left.sync="parentLeft" v-bind:right.sync="parentLeft"></child>
</template>

• child.vue

this.$emit("update:left", true);
this.$emit("update:right", true);

Non-Reactive Data

<template>
  <ul>
    <li v-for="item in $options.myArray"></li>
  </ul>
</template>

export default {
  data() {
    return {
      someReactiveData: [1, 2, 3]
    };
  },
  //custom option name myArray
  myArray: null,
  created() {
    //access the custom option using $options
    this.$options.myArray = ["value 1", "value 2"];
  }
};

<Template>

$event

<div @click="onClick($event)"></div>

<script>
  export default {
    methods: {
      onClick(event) {
        // here
      }
    }
  };
</script>

<script>

Watch

Set and Get

deep watcher

export default {
  watch: {
    item: {
      handler(val) {
        // do stuff
      },
      deep: true
    }
  }
};

<style>

Deep Selector

<style scoped>
  .a >>> .b {
    /* ... */
  }
</style>

will compile as

<style>
  .a[data-v-f3f3eg9] .b { /* ... */ } `
</style>