Vue学习笔记——5.组件使用_vue使用组件中的一部分模块-CSDN博客

本文链接：https://blog.csdn.net/qq_33905217/article/details/107681384

Vue学习笔记——5.组件使用

1.组件示例
2.组件复用
3.组件之间的交互
4.插槽slot

1.组件示例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字。
在这个例子中是。
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

2.组件复用

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
也就是说，我们使用的return是组件独立的。

我们会发现在这里使用的是data函数而不是data对象，因为只有他是函数了，每个实例才可以维护一份被返回对象的独立的拷贝。如果是data，那么就是多个实例共享的。

3.组件之间的交互

一个页面是由多个组件组成的
在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的

那么组件之间有时候需要进行交互，比如父组件向子组件传递信息来达到为某个元素传递变量，然后渲染到其子组件的效果。

3.1 父组件向子组件传递

我们可以使用prop向子组件传递。
用法:

在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个
property. 这是官方文档的话。

这样看起来点抽象。举个例子，我们可以在组件标签中为任意属性名（组件默认是没有value之类的属性名，所以名字随便起）赋值，然后在组件定义内部通过prop数组对象中声明同名的属性来接收参数。

<blog-post title="My journey with Vue"></blog-post>

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

注意
模板内的所有标签都需要一个根节点。根节点不能出现同级标签。

3.2 子组件向父组件传递

我们通过在子组件抛出一个事件，然父组件监听该事件来完成父子组件交互

<blog-post
  ...
  <!--监听enlarge-text事件-->
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

组件模板中的子组件

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

通过$emit(‘enlarge-text’)来抛出enlarge-text事件
当然，也可以携带参数

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

在监听事件的对应方法中加一个参数就可以完成参数接收

3.3 在组件上使用model

<input v-model="searchText">

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

因此，在自定义组件上我们也需要它来完成双向绑定
当用在组件上时，v-model 则会这样：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的必须：

将其 value attribute 绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <xhy v-model="msg"></xhy>{{msg}}
</div>
<script>
    Vue.component('xhy',{
        props:['value'],
        template:`
            <div>
            <input type="text"
            v-bind:value="value"
            @input="$emit('input', $event.target.value)"
            >
            </div>
            `
    })
    var vue = new Vue({
        el:'#app',
        data:{
            msg:'Hello World'
        }
    });
</script>
</body>
</html>

4.插槽slot

我们如果将一些组件定义在自定义组件的模板中，我们需要通过props来传递参数。
当然，除了这种方法我们还可以通过插槽来完成内容填充。
通过插槽我们可以在某个组件内定义一个占位符（也就是插槽），然后将我们另外的组件及内容插入。这样就不要用通过props传递来渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <xhy>
        <slot-title slot="slot-title" :title="title"></slot-title>
        <slot-li slot="slot-li" v-for="i in items" :info="i"></slot-li>
    </xhy>

</div>
<script>
    Vue.component('xhy',{
        template: '<div>\
                    <div>\
                        <slot name="slot-title"></slot>\
                    </div>\
                    <ul>\
                        <slot name="slot-li"></slot>\
                    </ul>\
                </div>'
    });
    Vue.component('slot-title',{
        props:["title"],
        template: '<h2>{{title}}</h2>'
    })
    Vue.component('slot-li',{
        props:["info"],
        template: '<li>{{info.name}}</li>'
    })
    var vm = new Vue({
        el:'#app',
        data:{
            title:"名单",
            items:[
                {name:"张三"},
                {name:"李四"}
            ]
        }
    });
</script>
</body>
</html>