vue组件学习(下)

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

子组件控制父组件

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

<!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...

相关文章

相关标签/搜索