vue2.0小结

• 父组件与子组件之间的通信

1. 父组件传值给子组件，通过props
2. 子组件传值给父组件，通过$emit

<!-- 父组件 -->
<template>
  <div>
    <child :msg="msg" @msgEvent="setMsg"></child>
  </div>
</template>

<script>
import child from './child.vue';
export default {
  data() {
    return {
      msg: 'hi vue',
    };
  },
  components: { child },
  methods: {
    setMsg(m) {
      this.msg = m;
    },
  },
};
</script>

<style lang="less" scoped>
</style>

<!-- 子组件 -->
<template>
  <div>
    <p @click="updateMsg">{{msg}}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: String,
  },
  data() {
    return {}
  },
  methods: {
    updateMsg() {
      this.$emit('msgEvent', 'hello vue');
    },
  },
};
</script>

<style lang="less" scoped>
</style>

• 如果在父组件想在子组件上监听自己的事件，需要加上native修饰符，否则点击无效

<router-link to=""  @click.native="hitClick"></router-link>

• 编写template的时候，2.0必须要用一个根元素（如div）将代码片段包裹起来，否则报错。
• 编写vue插件
  写插件：

//toast.vue 组件模板
<template>
  <div>
    <div v-show="show" class="toastContainer">
      <div class="toastText">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      text: '',
    }
  }
}
</script>

<style scoped>
.toastContainer {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 100%;
  z-index: 9999;
  text-align: center;
}

.toastText {
  display: inline-block;
  max-width: 80%;
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 22px;
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  border-radius: 5px;
  color: #fff;
}

.hide {
  display: none;
}

.show {
  display: block;
}
</style>

//toast.js 插件
import toast from '../components/toast.vue'
// toast vm实例
let toastVm = null
// toast消失计时器
let timer = null

const Toast = {
  /**
   * Vue.js 的插件应当有一个公开方法 install
   * @param {constructor} Vue 构造器
   * @param {object} 可选的选项对象
   */
  install: function (Vue, options) {
    // 默认选项
    const opt = {
      duration: '2000'
    }
    for (let property in options) {
      opt[property] = options[property]
    }
    Vue.prototype.$toast = (text, duration = opt.duration) => {
      // 是否创建了实例
      if (!toastVm) {
        const ToastTpl = Vue.extend(toast) // 创建构造器
        toastVm = new ToastTpl() // 创建实例，实例处于“未挂载”状态
        const tpl = toastVm.$mount().$el // 在文档之外渲染并且随后挂载(toastVm.$mount('#app')直接挂在会替换#app)
        document.body.appendChild(tpl) // 使用原生DOM API把它插入文档
      }
      // 设置toast组件的状态
      toastVm.text = text
      toastVm.show = true

      // 清除上一个提示的计时器
      clearTimeout(timer)
      timer = setTimeout(() => {
        toastVm.show = false
      }, duration)
    }
  }
}
export default Toast

调用插件：

import Toast from './toast.js'
Vue.use(Toast)

在组件中使用：

this.$toast('toast text')

写好的插件还可以发布到npm平台
自己写的一个vue toast插件：vue-toast-cpn