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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:56 发布时间:2020-04-29
摘要:时间: 2019-09-15阅读: 188标签: vue 1.前言 组件是Vue.js最推崇的,也是最强大的功能之一,他的核心目标是为了可重用性高,减少重复性的开发,我们可以把组件代码按着template、style、scr

时间: 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 &amp; $on【10bet】

关键词:

上一篇:没有了

下一篇:MySQL如何为字段添加默认时间浅析

最火资讯