vue 07

最新推荐文章于 2024-09-26 16:25:55 发布

ID88888888

最新推荐文章于 2024-09-26 16:25:55 发布

阅读量261

点赞数

文章标签： webpack javascript vue.js

本文链接：https://blog.csdn.net/ID88888888/article/details/123213855

版权

组件进阶

动态组件

<component :is="componentId"></component>

改变componentId的内容进行组件切换

组件缓存

 <keep-alive>
         <component :is="componentId"></component>
 </keep-alive>

激活与非激活

   activated(){
        console.log('激活');
    },
    deactivated(){
        console.log('失去激活');
    }

4.组件插槽

//子组件
 <slot name="content" :row="obj">{{ obj.two }}</slot> //{{ obj.two }}是默认内容
 //父组件
  <template #content  v-slot="scope"> //#和name对应,需要调用scope
          <h4>我是猫猫</h4> 
           <p>{{scope.row.one}} </p>     
 </template>

5.自定义指令

<p v-color="cstr">你喜欢的颜色</p>

Vue.directive('color',{
  inserted(el,binding){ //binding是将cstr的值传入,el代表这个元素
    el.style.color=binding.value
  },
  update(el , binding){ //更新数据后执行
    el.style.color=binding.value
  }
})