vue.js 组件之间传递数据

首先放上该类型的github地址:https://github.com/codethereforam/ChaZD

最初的作品地址:http://blog.gdfengshuo.com/2017/07/10/19

事先想找二个chrome协理划词翻译的插件,最后在今日头条上看出了本条答复,推荐的是ChaZD,用了一段时间笔者就欣赏上它的洗练方便。

前言

组件是 vue.js
最有力的机能之一,而组件实例的成效域是并行独立的,那就象征差异组件之间的数量不或然互相引用。怎么着传递数据也成了组件的要害知识点之一。

其一插件用的是有道翻译旧的api,由于有道限制每一种api
key每小时只好调用一千次,有时候会翻译不断,而且旧的api于 2017-12-31
后甘休运维。

组件

零件与组件之间,还留存着分裂的关联。父子关系与男士关系(不是父子的都暂称为小兄弟呢)。

原稿笔者:林鑫,小编博客:https://github.com/lin-xin/blog

于是乎,笔者就改写了这几个插件,使其得以调用有道智云新的api。作者fork的是lytofb/ChaZD,作者在原本ChaZD代码的底子上加了自定义api
key的机能。

父子组件

父子关系正是组件 A 在它的模版中动用了组件 B,那么组件 A 就是父组件,组件
B 就是子组件。

// 注册一个子组件
Vue.component('child', {
    data: function(){
        return {
            text: '我是father的子组件!'
        }
    },
    template: '{{ text }}'
})
// 注册一个父组件
Vue.component('father', {
    template: '<div><child></child></div>'  // 在模板中使用了child组件
})

直白选用 father 组件的时候:

<div id="app">
    <father></father>
</div>

页面中就会渲染出 :作者是father的子组件!

father 组件在模板中采纳了 child 组件,所以它便是父组件,child
组件被选拔,所以 child 组件就是子组件。

 

弟兄组件

四个零件互不引用,则为兄弟组件。

Vue.component('brother1', {
    template: '<div>我是大哥</div>'
})
Vue.component('brother2', {
    template: '<div>我是小弟</div>'
})

选取组件的时候:

<div id="app">
    <brother1></brother1>
    <brother2></brother2>
</div>

页面中就会渲染出 :

自小编是四弟

本身是兄弟

壹 、新增成效

 

改用有道智云新的api,能够自定义应用ID和密钥

 

Prop

子组件想要使用父组件的多少,我们要求通过子组件的 props
选项来博取父组件传过来的数据。以下笔者动用在 .vue 文件中的格式来写例子。

② 、使用验证

 

什么样传递数据

在父组件 father.vue 中引用子组件 child.vue,把 name 的值传给 child
组件。

<template>
    <div class="app">
        // message 定义在子组件的 props 中
        <child :message="name"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                name: 'linxin'
            }
        }
    }
</script>

在子组件 child.vue 中的 props 选项中评释它愿意获得的数码

<template>
    Hello {{message}}
</template>
<script>
    export default {
        // 在 props 中声明获取父组件的数据通过 message 传过来
        props: ['message']
    }
</script>

那正是说页面中就会渲染出:Hello linxin

2.1 下载插件

下载地址:ChaZD-thinkam

倘若你的浏览器支持选取非Web
Store的插件,间接将下载的crx拖到chrome://extensions/页面。

只要不辅助,将crx文件扩张名改为zip并解压,在chrome://extensions/勾选开发者形式,接着在
Chrome
设置进行的地点,点击加载未打包的开始展览。详细步骤见[chrome怎么设置非官方市场的插件?

 

单向数据流

当父组件的 name
产生转移,子组件也会自动地立异视图。不过在子组件中,我们毫不去修改
prop。若是你必须求修改到那个数据,你可以动用以下格局:

方法一:把 prop
赋值给3个有的变量,然后须要修改的话就修改那几个片段变量,而不影响 prop

export default {
    data(){
        return {
            newMessage: null
        } 
    },
    props: ['message'],
    created(){
        this.newMessage = this.message;
    }
}

办法二:在测算属性中对 prop 实行处理

export default {
    props: ['message'],
    computed: {
        newMessage(){
            return this.newMessage + ' 哈哈哈';
        }
    }
}

2.2申请有道智云翻译服务

  • 注册有道智云帐号并报到到控制台页面
  • 创办三个翻译实例:控制台 > 自然语言翻译 > 翻译实例 >
    创立翻译实例
  • 成立三个行使并绑定翻译服务:控制台 > 应用管理 > 我的应用 >
    成立应用 > 绑定服务
  • 在插件中绑定应用——将上手续的选用ID和使用密钥填写到插件设置页中相应的地点,如下图

图片 1

 

自定义事件

prop
是单向绑定的:当父组件的本性变化时,将传输给子组件,不过不会反过来。修改子组件的
prop
值,是不会流传给父组件去创新视图的。那么子组件要哪些去与父组件通信呢?

这正是自定义事件。通过在父组件 $on(eventName) 监听自定义事件,当子组件里
$emit(eventName) 触发该自定义事件的时候,父组件执行相应的操作。

例如在父组件中央控制制二个弹框子组件的显示,在子组件中按下关闭之后,告诉父组件去潜伏它,然后父组件就执行操作隐藏弹框。

<template>
    <div class="app">
        // hide 为自定义事件,名字可以自己随便起,不能有大写字母,可以使用短横线
        // @hide 监听子组件触发 hide 事件,则会执行 hideDialog 方法
        <dialog :is-show="show" @hide="hideDialog"></dialog>
        <button @click="showDialog">显示弹框</button>
    </div>
</template>
<script>
    import dialog from './dialog.vue';
    export default {
        components: { dialog },
        data() {
            return {
                show: false
            }
        },
        methods: {
            showDialog() {
                this.show = true;
            },
            hideDialog() {
                this.show = false;
            }
        }
    }
</script>

在子组件 dialog.vue 中:

<template>
    <div class="dialog" v-show="isShow">
        <p>这里是弹框子组件</p>
        <button @click="toHide">关闭弹框</button>
    </div>
</template>
<script>
    export default {
        // 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-show
        props: ['isShow'],
        methods: {
            toHide(){
                // $emit 方法触发父组件的监听事件
                this.$emit('hide');
            }
        }
    }
</script>

那般就兑现了父子组件之间的竞相通信。

2.3 现实翻译表明

参考原著者github项指标README.md:https://github.com/ververcpp/ChaZD

 

Vuex

下面的例证都以赤手空拳在父子关系的组件上,不过对于别的层级的涉嫌,完结起来就相比麻烦了。那么此时
Vuex 就能更好的帮您在依次零部件间实时广播发表了。关于
Vuex,可查看自身的另一篇小说:Vuex
模块化实现待办事项的意况管理

三、结尾

 

有道翻译旧的api于次日就停下运作了,原来的那几个插件应该就无法用了,作者赶在前一天到家了须臾间这几个插件,从前的老用户能够两次三番选取。尽管你没用过,欢迎尝试。

出于时日匆忙加上自己刚接触插件才二日,代码应该还有局部题材,欢迎建议难题。后边小编会继续周详代码,添加一些定制效率。

 

总结

零件通信并不是必然要运用必必要动用 Vuex,对于有个别归纳的数码传递,prop
也足以达成。本文首假使对组件传参的有个别基础知识点的笔录,实战能够参考
notepad 那些例子,使用 prop
完成子组件的彰显与隐藏,使用 vuex 来贯彻组件间的多寡状态管理。

越来越多小说:blog

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注