VUE-组件以及插槽

最新推荐文章于 2024-12-11 10:38:39 发布

WeChat624

最新推荐文章于 2024-12-11 10:38:39 发布

阅读量339

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_71879136/article/details/126993728

版权

本文介绍了Vue.js中组件的四种定义方式，包括使用Vue.extend、直接使用Vue.component、模板字符串定义以及template标签定义。详细讲解了全局和私有组件的创建，以及组件的数据、方法和生命周期。同时，文章探讨了组件动画的实现，如通过flag标识符和:is属性切换组件。最后，讨论了插槽的概念，包括默认插槽和具名插槽的使用，展示了如何通过插槽实现父组件内容在子组件中的定制化布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、全局组件定义的四种方式
1、使用 Vue.extend 配合 Vue.component 方法：
声明组件： var login = Vue.extend({template: '<h1>登录</h1>' });
   全局注册（名字、模板）： Vue.component('login', login);
在#app中渲染：<login></login>
2、直接使用 Vue.component 方法：
Vue.component('login',{template:"<h2> 2222</h2>"})
在#app中渲染：<login></login>
3、将模板字符串，定义到script标签中：
<script id="tmpl" type="x-template">
     <div><a href="#">登录</a> | <a href="#">注册</a></div>
   </script>
同时，需要使用 Vue.component 来定义组件：
   Vue.component('account', {
     template: '#tmpl'
   });
在#app中渲染：<account></account>
4、将模板字符串，定义到template标签中：
   < template id="tmpl">
       <div><a href="#">登录</a> | <a href="#">注册</a></div>
     </ template >
同时，需要使用 Vue.component 来定义组件：(前三种不怎么使用，使用第四种)
   Vue.component('account', {
        template: '#tmpl'
     });
   在#app中渲染：<account></account>

二、私有组件（第四种）
<template id="myheader">
    <div>
   第一位
    <h1>第二位</h1>
   <h2>第三位</h2>
   </div>
</template>

const vm = new Vue({
    el: '#app',
   data: {
    },
   methods: {
   },
    components:{
    'my-header':{
   template:'#myheader'
    }
    }
})
   在#app中渲染：<my-header></my-header>

三、组件显示数据和方法

1、为什么组件中的data属性必须定义为一个方法并返回一个对象
为了数据隔离
2、组件中含有 (数据)data(){return{}} (方法)methods{} (生命周期) 都是同级的

<body>
  <div id='app'>
    <conten></conten>
  </div>

  <template id="htm">
    <div>
      {{msg}}
      <button @click="add(2)">点击我数字加2</button>
      {{word}}
    </div>
  </template>
  <script>
    Vue.component('conten',{
      template:'#htm',
      // 为什么组件中的data属性必须定义为一个方法并返回一个对象
      // 数据隔离
      data(){
        return{
          msg:0,
          word:'hello'
        }
      },
      methods:{
        add(n){
          this.msg += n
        }
      }
    })
  const vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
  })
  </script>
</body>

四、组件动画
1、使用flag标识符结合v-if和v-else切换组件

2、使用:is属性来切换不同的子组件，并添加切换动画
（1）使用component标签，来引用组件，并通过:is属性来指定要加载的组件：
<transition><component is="conten"></component></transition>
<transition mode="out-in"><component :is="flag?'conten':'conten_1'"></component> </transition>
其中mode是动画的模式

五、slot插槽
1、什么是插槽：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容替换子组件的<slot></slot>标签。

2、具名插槽：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

3、默认插槽：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。