vue组件学习（下）

2024年2月10日 184次阅读 来源: 本人

上次我们说了什么是组件，和它的基本应用，下面我们来看一下我自认为的进阶内容。

子组件控制父组件

首先写好基本结构，创建一个子组件

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

</head>
<body>

<div id="app">
    {{text}}
    <children></children>
    <children></children>
    <children></children>
</div>
<script src="./../vue.js"></script>
<script>
    var children = {
        props:["child"],
        template:`<div></div>`
    }
    var vm = new Vue({
        el:"#app",
        data:{
            
        },
        components:{
            children
        }
    })

####父元素添加自定义事件

html：
<children @addNum =”add”></children> //这里的名字可以自定义，后面是函数名。

js：

vm中写入methods且写入函数，并在data中写入数据

data：{

text：0

}

methods：{

addNum(){
    this.text ++;
}

}

这里写完大多数初学者会觉得，这有事件，也绑定了，应该就可以了吧。但不要忘了，这是自定义的，会报错的，一般我们会通过子组件去控制它，具体怎么做呢？下面的内容就是重中之重了。

在我们子组件模板中的元素中写入点击事件

template:<button @click="click">{{counter}}</button>

为了更好的看下效果我们给子元素也加上数据，通过data函数。

data(){

return{
    counter
}

}

在methods中添加事件

methods:{

click(){
    this.counter ++;  // 这里我们为了更好的看到效果。
    this.$emit("addNum")    //这里的$emit是起到触发作用的，也就是说我们想让子组件控制父组件必须用这个属性进行触发。也可以把子组件控制父组件这一过程理解为表单提交，而$emit就是最后的提交。
}

}
这样就基本完成了子组件控制父组件功能。

插值

组件还有一个很重要的东西叫做插槽 slot。

这个标签会把我们在html里的自定义标签里的内容放在自身上来，一般用在模板中，例如

    <div id="app">
        <children>1111</children>
    </div>
    <script src="./../vue.js"></script>
    <script>
        var children = {
            template:`<div><slot></slot></div>` //这里就会把我们自定义标签<children></children>里的内容放到slot中，slot标签不会在页面中显示，它只是一个功能标签
        }
        var vm = new Vue({
            el:"#app",
            data:{
                
            },
            components:{
                children
            }
        })
    </script>

当然我们要注意一种特殊情况，如果我们的自定义标签没有内容，我们可以在slot中加入内容为默认内容，但是如果我们设置了默认内容，而我们的自定义标签也不是空的，那么自定义标签里的内容会替代我们的默认内容。

如果我们的自定义标签不只一条内容，这是我们该怎么办呢？

这是就用到我们的 slot里name属行了

例如：

   <div id="app">
        <children>   // 这里我们有多条数据
            <div slot= "header">这是头</div>  // 这里我们根据name的不同去绑定不同数据
            <div slot="footer">这是尾</div>
        </children>
    </div>
    <script src="./../vue.js"></script>
    <script>
        var children = {
            template:`<div><slot name="header"></slot><slot name="footer"></slot></div>`  // 设置不同name
        }
        var vm = new Vue({
            el:"#app",
            data:{
                
            },
            components:{
                children
            }
        })
    </script>

这样，我们就可以根据name的不同而进行获得不同的数据了

vue组件远不止如此，这只是一些较为基础的东西。更多的组件知识我们可以通过官方来进行学习 https://cn.vuejs.org/v2/guide…

    原文作者：本人
    原文地址: https://segmentfault.com/a/1190000012005330
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞