vueemit实现源码_vue 源代码

文章目录：

• 1、vue emit 有多个参数该如何写
• 2、vue $emit 调用父组件异步方法，执行完毕后再执行子组件的某方法，如何实现？
• 3、Vue组件内部实现一个双向数据绑定的实例代码

vue emit 有多个参数该如何写

详细步骤如下：

一、$emit传递一个参数时

子组件：

this.$emit('closeChange',false)。

父组件：

posilCom @closeChange="closeCom($event)"/posilComcloseCom(msg) { this.msg = msg;}。

二、$emit传递多个参数时

子组件：

this.$emit('closeChange',false,true)。

父组件：

posilCom @closeChange="closeCom(arguments)"/posilComcloseCom(msg)this.msg1 = msg[0]; this.msg2 = msg[1]。

扩展资料：

一、vue emit 3个参数详细描述：

1、子组件的JS

**/define(function(require, exports, module){var $ = require("lib_cmd/zepto-cmd"),

Vue = require('lib_cmd/vue-cmd'),

main = require("js_cmd/main-cmd"),

var vm= Vue.component('myaddress', {

template: ' div data-role="data-widget" data-widget="address-editor"

class="5738-d320-fe2d-9202 address_mask" id="address-editor"\/div'    props:["address","ids"],

methods: {created: function ()  module.export= vm;/*注册名为“myaddress”的组件 ，从父组件传递过来两个数据"address","ids"*/

2、父组件EJS页面

%- include ../../header %

link href="/css/vd/activity/myAward.css?v=%= config.version %" rel="stylesheet" /

div data-role="container"

class="d320-fe2d-9202-3468 body %=" pageName %" id="myAward"myaddress :address="editAddr"

:ids="ids"/myaddress

/divscript seajs.use('js_cmd/vd/activity/myAward-cmd');/script

%- include ../../footer %

/*在定义的组件 “myaddress”中绑定两个父组件的数据 "editAddr" "ids"*/

3、父组件的JS页面

* Created by youchen.ma on 2017/6/21.

*/define(function (require, exports, module)

var $ = require("lib_cmd/zepto-cmd"),

Vue = require("lib_cmd/vue-cmd"),

main = require("js_cmd/main-cmd"),

Address = require('js_cmd/vd/venue/widget/venueEditAddress-cmd')  //引入子组件的JS文件

二、vue emit定义：

主要内容包括数据绑定、指令、表单控制绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue cli、测试开发和调试、源代码分析以及主流的打包和构建工具。内容全面，讲解详细，示例丰富，适合各级开发人员。

参考资料：百度百科-Vue.js权威指南

vue $emit 调用父组件异步方法，执行完毕后再执行子组件的某方法，如何实现？

// 可以使用回调的方法

// 父页面

    // 父页面调用组件的html 中   添加事件 @test="test"

 methods : {

    test(data, cab) {

          setTimeout(() = {

              // 这里使用定时器 模拟执行完方法

              console.log(data) // 这是传递过来的参数 用于处理

              data++

              cab(data) // 将处理完成的数据返回回去

          }, 2000)

    }

 }   

 // 子页面

 this.$emit('tset', 1, (res)= {

     console.log(res) //  2秒后会执行这一句  打印2

 })

 // 我们也可以用 Promise 的方法代替 回调

 methods : {

    test(data) {

        return new Promise((resolve)={

             setTimeout(() = {

              // 这里使用定时器 模拟执行完方法

              console.log(data) // 这是传递过来的参数 用于处理

              data++

              resolve(data) // 将处理完成的数据返回回去

          }, 2000)

        })

    }

 }

  // 子页面

 const res = await this.$emit('tset', 1)

 console.log(res) // 2秒后会执行这一句

Vue组件内部实现一个双向数据绑定的实例代码

思路：父组件通过props传值给子组件，子组件通过

$emit

来通知父组件修改相应的props值，具体实现如下：

import

Vue

from

'vue'

const

component

=

{

props:

['value'],

template:

`

div

input

type="text"

@input="handleInput"

:value="value"

/div

`,

data

()

{

return{}

},

methods:

{

handleInput

(e)

{

this.$emit('input',

e.target.value)

}

}

}

new

Vue({

components:

{

CompOne:

component

},

el:

'#root',

template:

`

div

comp-one

:value1="value"

@input="value

=

arguments[0]"/comp-one

/div

`,

data

()

{

return{

value:

'123'

}

}

})

总结

以上所述是小编给大家介绍的Vue组件内部实现一个双向数据绑定的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:轻松理解vue的双向数据绑定问题详解Vue双向数据绑定原理解析Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)vue中的router-view组件的使用教程基于vue-upload-component封装一个图片上传组件的示例Vue

cli3

库模式搭建组件库并发布到

npm的流程