vue组件学习（下）

时间 2019-12-07

标签 vue 组件学习繁體版

原文原文链接

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

子组件控制父组件

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

<!DOCTYPE html>
<html lang="en">
<head>vue

<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>app

<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
        }
    })

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

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

js：学习

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

data：{this

text：0

}code

methods：{component

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