vue mixins & extends

最新推荐文章于 2025-03-06 10:23:45 发布

辣子鸡丁上将

最新推荐文章于 2025-03-06 10:23:45 发布

阅读量362

点赞数

分类专栏： Vue 文章标签： vue mixins extends

本文链接：https://blog.youkuaiyun.com/weixin_39205240/article/details/80982773

版权

Vue 专栏收录该内容

34 篇文章

订阅专栏

 
  const 
  myMixin = { 
 
  created(){ 
 
  console. 
  log( 
  this. 
  msg + 
  '1') 
 
   }, 
 
  methods:{ 
 
  hello(){ 
 
  console. 
  log( 
  this. 
  msg + 
  '2') 
 
   } 
 
   } 
 
   }; 
 
  Vue. 
  mixin({ 
 
  created(){ 
 
  console. 
  log( 
  this. 
  msg + 
  '3'); 
 
   }, 
 
  methods:{ 
 
  hello(){ 
 
  console. 
  log( 
  this. 
  msg + 
  '4'); 
 
   } 
 
   } 
 
   }) 
 
  //----------------------------------------------------------- 
 
  //如果全局mixin和组件内mixin有同名的钩子函数，钩子函数都会执行，并且先执行全局后执行组件内。 
 
  //hello3 index.html:30 
 
  //hello1 index.html:20  
 
  //----------------------------------------------------------- 
 
  Vue. 
  filter( 
  'uppercase', 
  function( 
  value){ 
 
  return 
  value. 
  toUpperCase(); 
 
   }) 
 
  var 
  vm = 
  new 
  Vue({ 
 
  el: 
  "#app", 
 
  mixins:[ 
  myMixin], 
 
  data:{ 
 
  msg: 
  'hello' 
 
   } 
 
   });

 
  const 
  myMixin = { 
 
  created(){ 
 
  this. 
  hello(); 
 
   }, 
 
  methods:{ 
 
  hello(){ 
 
  console. 
  log( 
  this. 
  msg + 
  '2') 
 
   } 
 
   } 
 
   }; 
 
  Vue. 
  mixin({ 
 
  created(){ 
 
  this. 
  hello(); 
 
   }, 
 
  methods:{ 
 
  hello(){ 
 
  console. 
  log( 
  this. 
  msg + 
  '4'); 
 
   } 
 
   } 
 
   }) 
 
  //----------------------------------------------------------- 
 
  // 组件内的会覆盖全局的。 
 
  //hello2 index.html:24 
 
  //hello2 index.html:24 
 
  //-----------------------------------------------------------