vue有时候你不需要 $emit & $on【10bet】

时间: 2019-09-15阅读: 188标签: vue

1.前言

组件是Vue.js最推崇的，也是最强大的功能之一，他的核心目标是为了可重用性高，减少重复性的开发，我们可以把组件代码按着 template、style、script的方式拆分，放置在对应的.vue文件中。组件可以理解我预先定义好的ViewModel类，他的核心包括以下几个：

• template（模板）最终展示给用户的DOM之间的映射
• data（初始数据）
• 10bet，props（接收的外部参数）用于组件之间的数据的传递和共享。参数默认是单项绑定的（父到子），但也可以显示声明为双向绑定。
• methods（组件的一些方法）。
• 生命周期函数 这里不细讲 后期会跟进。

在此之前，子组件到父组件的传递事件我一般还是使用$emit和$on，因为这个操作理解起来并不难，代码一般也挺清晰。

2.组件的使用

之前的一些有关 vue的一些基础知识可以看上一遍文章，这里不再重复。

不过今天遇到这么个情况 ——

1）、首先我们在项目中创建一个组件parent.vue 和childen.vue两个文件。

父组件：

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        methods:{

        },
components: {

        }
    }
</script>

子组件：

<template>
    <div>
        <h1>我是子组件（引用）</h1>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

接下来我们要做的就是把这个子组件引入到父组件中

import childen from './childen.vue';

然后我们要做的是在上面的components里面注册一下，之后就可以直接在模板里直接使用组件了。代码如下：

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <childen></childen>
    </div>
</template>

<script>
    import childen from './childen.vue'
    export default {
        data(){
            return {

            }
        },
        methods:{

        },
        components: {
            childen
        }
    }
</script>

div  button @click="item.reply = !item.reply" {{item.reply?'取消回复':'回复'}} /button button @click="item.editing = !item.editing" {{item.editing?'取消修改':'修改'}} /button button @click="removeComment(item.id)"删除/button/divCommentInput v-if="item.reply" @submit="item.reply = false" :lx :parentId="item.id"/

2）、接下来我们要做的是父子组件之间的数据传递

因为组件之间的作用于是相互独立的，所以子组建不能直接引用其他组件的数据，因此vue给我们提供了一些数据传递的方式，常用的有以下几种：

• props
• 组件通信
• slot

这是一个评论组件的一部分，button-group是回复、修改、删除 3 个按钮，点击回复的话下面的CommentInput组件会显示。本来想着在那里操作就在哪里取消，但是写完了，产品大人一看，表示不行，按钮不能在上面，应该统一放在评论内容和输入框的下方，不妥协。

1、父附件向子组件传值（props）

（1）、字面量语法
父组件需要这样修改：

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要传的值-->
        <childen msg="hello"></childen>
    </div>
</template>

<script>
    import childen from './childen.vue'
    export default {
        data(){
            return {

            }
        },
        methods:{

        },
        components: {
            childen
        }
    }
</script>

在子组件中直接引用我们下面props定义的msg

<template>
    <div>
        <h2>我是子组件（引用）</h2>
        <h2>父子传值（字面量）</h2>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        props:['msg'],
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

（2）、动态语法
我们需要事先在data里面定义一个变量 name 然后在子组件的标签中 把这个变量通过绑定 赋值给msg1 这就是我们要在props中定义的参数，为了方便这里写在一个组件里。
父组件：

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要传的值-->
        <childen msg="hello" :msg1="name"></childen>
    </div>
</template>

<script>
    import childen from './childen.vue'
    export default {
        data(){
            return {
                name:'Masc'
            }
        },
        methods:{

        },
        components: {
            childen
        }
    }
</script>

子组件：

<template>
    <div>
        <h2>我是子组件（引用）</h2>
        <h2>父子传值（字面量）</h2>
        <p>{{msg}}</p>
        <h2>父子传值（动态传值）</h2>
        <p>{{msg1}}</p>
    </div>
</template>

<script>
    export default {
        props:['msg','msg1'],
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

我们可以在methods中写一些方法 来动态的改变我们定义的变量 name
props默认是单项绑定 我们可以通过下面的绑定修饰符来改变绑定状态。

• .sync（双向绑定）
• .noce（单词绑定）

        <!--默认为单项绑定-->
        <childen msg="hello" :msg1="name"></childen>
        <!--双向绑定-->
        <childen msg="hello" :msg1.sync="name"></childen>
        <!--单词绑定-->
        <childen msg="hello" :msg1.once="name"></childen>

本文由10bet发布于Web前端,转载请注明出处：vue有时候你不需要 $emit & $on【10bet】

关键词：