Vue中的插槽和自定义指令

2023-12-22 18:49:44

目录

一、插槽

1.默认插槽

2.具名插槽

3.作用域插槽

二、自定义指令

全局注册自定义指令

执行一次性初始化设置

组件vnode更新触发

局部注册自定义指令

一、插槽

父组件传递模板给子组件，子组件使用插槽声明slot元素承载分发内容出口。

1.默认插槽

父组件提供给子组件模板，默认会填充到默认插槽中

slot不设置name会隐式创建一个name为default的插槽

<slot name='default'></slot>
2.具名插槽

父组件提供了具体的模板，填充到具名插槽中

指定模板填充到具名插槽中 v-slot绑定具名插槽名称 可以简写为#

<template v-slot:header></template>

<slot name='header'></slot>

?默认插槽和具名插槽的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-child>
      <div>我是父组件提供的模板{{msg}}</div>
      <img width="150px" src="../../Axure/swipe/1.jpeg" alt="">
      <!-- <template v-slot:header> -->
      <template #header>
        <div>
          我是头部的内容
        </div>
      </template>
      <template v-slot:footer>
        <div>
          我是底部的内容
        </div>
      </template>
    </my-child>
  </div>
  <script>
    let myChild = {
      data(){
        return {
          child:'我是子组件',
          user:{
            firstName:'zhao',
            lastName:'terry'
          }
        }
      },
      template:`
        <div>
          {{child}}
          <slot name='default'></slot>  
          <header>
            <slot name='header'></slot>  
          </header>
          <footer>
            <slot name='footer'></slot>  
          </footer>
        </div>
      `
    }
    new Vue({
      el:"#app",
      // 局部注册组件
      components:{
        'my-child':myChild
      },
      data:{
        msg:'hello vue2'
      },
      methods:{

      }
    })
  </script>
</body>
</html>
3.作用域插槽

父组件作用域使用子组件数据

父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式

1.在子组件默认插槽中动态绑定插槽prop

<slot v-bind:user='user'>

2.在父组件模板中使用v-slot='插槽prop'接收子组件数据

<template v-slot='scope'>

{{scope.user.xxxx}}

</template>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-child>
      <template v-slot="scope">
        <div>
          {{scope.user.lastName}}
        </div>
      </template>
    </my-child>
  </div>
  <script>
    /**
     * 作用域插槽：
     *  父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式
     *  1.默认插槽使用v-bind绑定插槽prop
     *  2.在父组件作用域中使用v-slot接收插槽prop
    */
    let myChild = {
      data(){
        return {
          child:'我是子组件',
          user:{
            firstName:'zhao',
            lastName:'terry'
          }
        }
      },
      template:`
        <div>
          {{child}}
          <slot v-bind:user='user'>{{user.firstName}}</slot>
        </div>
      `
    }
    new Vue({
      el:"#app",
      // 局部注册组件
      components:{
        'my-child':myChild
      },
      data:{
        msg:'hello vue2'
      },
      methods:{

      }
    })
  </script>
</body>
</html>

二、自定义指令

v-xxx

全局注册自定义指令
Vue.directive('指令名称',{

当被绑定元素插入到父节点调用

inserted(el,binding,vnode,oldNode){

el---->绑定指令dom元素

binding---->元素数据 value

vnode 虚拟节点 dom对象内存中数据表示

},
    // 注册自定义指令
    Vue.directive('focus',{
      // 指令绑定dom元素执行钩子函数 调用一次
      bind(el,binding,vnode){
        console.log(el,binding);
        el.style.backgroundColor = binding.value;
      },
      // 当被绑定元素插入到父节点中
      inserted(el,binding,vnode){
        // console.log(el,binding,vnode,'2222');
        el.focus();
      }
    })

执行一次性初始化设置
bind(el,binding,vnode,oldNode){

}
组件vnode更新触发
update(el,binding,vnode,oldNode){

}

})
局部注册自定义指令
      // 局部注册自定义指令
      directives:{
        myshow:{
          inserted(){

          },
          bind(el,binding){
            el.innerHTML = binding.value;
          },
          // 指令所在组件更新vnode调用
          update(el,binding,vnode){
            console.log(el,binding,vnode,'4444');
            el.innerHTML = binding.value;
          }
        }
      },

文章来源:https://blog.csdn.net/l12345666777/article/details/135156639
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。