Vue组件、组件传值和组件插槽

最新推荐文章于 2026-04-02 07:49:04 发布

原创最新推荐文章于 2026-04-02 07:49:04 发布 · 1.2k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文详细介绍了Vue组件的使用，包括组件的注册、数据传递和插槽的运用。重点讲述了组件间的父子传值、子组件向父组件的通信，以及事件中心hub在兄弟组件间的数据传递。此外，还探讨了插槽的功能，特别是作用域插槽如何允许父组件访问子组件的内部数据。

Vue组件、组件传值和组件插槽

一、Vue组件：

1.组件 (Component) 是 Vue.js 最强大的功能之一，通过组件可以扩展 HTML 元素，封装可重用的代码；
2.组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等
3.组件注册：
3.1 组件参数的data值必须是函数同时这个函数要求返回一个对象
3.2 组件模板必须是单个根元素
3.3 组件模板的内容可以是模板字符串
3.4 组件可以重复使用多次；因为data中返回的是一个对象所以每个组件中的数据是私有的，即每个实例可以维护一份被返回对象的独立的拷贝
3.5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件；
命名：Vue.component(‘HelloWorld’…
使用：< hello-world >
a.全局注册
a.1 全局组件注册后，任何vue实例都可以用

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
     <hello-world></hello-world>
  </div>
<script type="text/javascript">
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    });
    Vue.component('button-counter', {
      // 1、
      data: function(){
        return {
          count: 0
        }
      },
   // 2、组件模板必须是单个根元素;组件模板的内容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">点击了{{count}}次</button>
          <button>测试123</button>
			#  6 在字符串模板中可以使用驼峰的方式使用组件	
		   <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
      }
    });
  </script>

b.局部注册：只能在当前注册它的vue实例中使用

//定义：
//对应组件名的实际组件
var HelloWorld = {
  data: function(){
    return {
      msg: 'HelloWorld'
    }
  },
  template: '<div>{{msg}}</div>'
};
//局部注册组件名
var vm = new Vue({
  el: '#app',
  data: {   
  },
  components: {
    'hello-world': HelloWorld,
  }
});
//使用
  <div id="app">
    <!-- 不能使用驼峰命名 -->
    <hello-world></hello-world>
    <test-com></test-com>
  </div>

二、Vue组件之间传值

父组件向子组件传值(子组件props:属性；父组件绑定)
父组件传值形式是以属性的形式绑定值到子组件身上。
父组件：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

子组件：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

2.子组件向父组件传值
（实例对象的方法$emit：发射，发射自定义事件名称和参数父组件监听自定义的事件名称和定义处理函数

a. 子组件用$emit()触发事件：
子组件监听按钮的点击事件对应的处理就是：触发另一个自定义的事件，并该事件的处理函数传递参数:
$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据

Vue.component('menu-item', {
  props: ['parr'],
  template: `
    <div>
      <ul>
        <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
      </ul>
      <button @click='$emit("enlarge-text, 5")'>扩大父组件中字体大小</button>
    </div>
  `
});

b. 父组件用v-on(缩写@) 监听子组件的事件
监听:
@enlarge-text=‘handle’
解析:@子组件定义的事件名称=‘父组件实际处理函数’

父组件:
<div id="app">
  <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
  <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
</div>

    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });

兄弟组件之间的传递 (事件中心hub，事件触发 hub的emit()，事件中心监听hub.$on|off)
;兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据; var hub = new Vue() 全局下创建hub对象，其实就是vue实例
a. 传递数据方: 通过一个事件触发emit(自定义事件名称，传递的数据)

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      
    });

b. 接收数据方，【通过mounted(){} 钩子中】事件中心监听hub.$on(事件名称，事件处理箭头函数)

Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      mounted: function() {
        // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });

接收方：mounted中调用事件中心监听组件1中自定义的事件名称和接收参数val
hub.$on(‘jerry-event’, (val) => {this.num += val; });

销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

d. 发送方变为接收方，在mounted中添加监听；接收方变发送方则emit发送函数名称和参数；

三、组件插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的
例如，设想一个带有如下模板的组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在元素上的 attribute 被称为插槽 prop 。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

独占默认插槽的缩写语法：
在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
或
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

插槽的作用之一：后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个组件中：
我们可能希望这个内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在标签内：

<button type="submit">
  <slot>Submit</slot>
</button>

现在当我在一个父级组件中使用并且不提供任何插槽内容时：

<submit-button></submit-button>

//解析
//后备内容“Submit”将会被渲染：
//<button type="submit">
//  Submit
//</button>

但是如果我们提供内容：

<submit-button>
  Save
</submit-button>
//解析
//<button type="submit">
//  Save
//</button>

作用域插槽
【有时让插槽内容能够访问子组件中才有的数据是很有用的。】
例如，设想一个带有如下模板的《 current-user》(<>) 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>
//此时的user是子组件current-user的data里面的数据

我们可能想换掉备用内容，用名而非姓来显示。如下：
父组件使用current-user时

<current-user>
  {{ user.firstName }}
</current-user>
//此时的user是父组件的data里面的user

然而上述代码不会正常工作，因为只有组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让(子组件current-user的) user 在父级的插槽内容中可用，我们可以将 user 作为《slot》 (<>)元素的一个 attribute 绑定上去：

<span>
//为了避免混淆，一般是:user="user"
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在《slot》元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

//slotProps.user对应上面:user="user"的第一个user
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
//在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

//简写
<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
//或者
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>