vue和mpvue

一、mixins的理解

    vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

     组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

     而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

     单纯组件引用：

          父组件 + 子组件 >>> 父组件 + 子组件

     mixins：

          父组件 + 子组件 >>> new父组件

 

     值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。

// App.vue

   

    混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。 
  混合对象可以包含任意组件选项。 
  当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

  混合对象的使用主要是在项目中提取出常用的公共方法，提高代码的重用率。

//可以把小程序分享代码抽离出来 vue组件中import引入 mixins声明
export default {
  onShareAppMessage () {
    return {
      title: '小程序分享',
      path: '/pages/index/main'
    }
  }
}

 

二、Vue的计算属性：computed

1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。

2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。

"demo">
        姓："text" placeholder="firstName" v-model="firstName">

        名："text" placeholder="lastName" v-model="lastName">

        姓名1(单向):"text" placeholder="FullName1" v-model="fullName1">

        姓名2(双向):"text" placeholder="FullName2" v-model="fullName2">

改变姓和名时，对应的姓名1和姓名2会发生改变。

改变姓名1时，姓和名、姓名2都不会改变。

改变姓名2时，对应的姓和名，以及姓名1也会改变。

三、关于 $emit 的用法

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn； 

例如：子组件：

父组件：