2020-08-31 Vue mixin混入

mixin混入复用代码段（类似于函数的用法）

场景:

1. 多个组件如有相同的属性，方法等
1. 定义一个公共的混入，方便组件复用
1. 注入到任意组件使用,组件中定义mixins属性，值为数组
注意：
当前组件和混入中的方法或者属性冲突时，优先使用自己的

<body>
  <div id="app">
    <home></home>
    <news></news>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  //定义一个混入,和定义组件的语法相同
  const mixin1 = {
    data(){
      return {
        msg:'hello'
      }
    },
    methods:{
      changeMsg(){
        this.msg = '改变了'
      }
    }
  }
  
  //定义组件
  let Home = {
    template:`
      <div>
        Home组件
        {{ msg }}
        <button @click="changeMsg">改变</button>
      </div>
    `,
    //比如home组件复用mixin，定义一个mixins，类似于components
    //组件间复用mixin数据互不影响，注入mixin的语法如下
    mixins:[mixin1]
  }

  let News = {
    template:`
      <div>
        News组件
      </div>
    `
  }

  //注册成全局组件
  Vue.component('Home',Home);
  Vue.component('News',News);

  let vm = new Vue({
    el:'#app',
    data:{

    },
  })
</script>

2020-08-31 Vue mixin混入

mixin混入 复用代码段（类似于函数的用法）

mixin混入复用代码段（类似于函数的用法）