如何封装对象,对象中有两个方法on和emit,on方法用来调用,emit方法用来调用,参数和vue的$on $emit一样
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何封装对象,对象中有两个方法on和emit,on方法用来调用,emit方法用来调用,参数和vue的$on $emit一样相关的知识，希望对你有一定的参考价值。
class object1on = () =>
// TODO
emit = () =>
// TODO
export default object1
// 可以把这个类注册到全局变量，main.js中
import object1 from '你的object1文件路径'
Vue.prototype.$object1 = object1
// 其他地方调用的话，就 this.$object1.on() 和this.$object1.emit(）
// 希望可以帮到你 参考技术A 用盒子装么
如何封装对象,对象中有两个方法on和emit,on方法用来调用,emit方法用来调用,参数和vue的$on $emit一样如何封装对象,对象中有两个方法on和emit,on方法用来调用,emit方法用来调用,参数和vue的$on $emit一样如何封装对象,对象中有两个方法on和emit,on方法用来调用,emit方法用来调用,参数和vue的$on $emit一样
angularJS 系列---$emit(), $on(), $broadcast()的使用
下面以一个例子来讲述 angular 中的event system，有$emit(), $on(), $broadcast().效果图如下
下面的代码中，用到了 controller AS 的语法，具体这种语法的使用情况，好处或是与 原来 直接在 Controller中把视图对象直接绑定到 $scope 对象上面的区别，
可以查看我之前的一片博文。
直接贴代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body ng-app="app">
<div class="container" ng-controller="AccountController as vm">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation">
<span>Current Balance: {{ vm.accountBalance | currency }}</span>
</li>
</ul>
</nav>
<h3 class="text-muted">Account Controller</h3>
<h5>dispatches event <b>WithdrawalNotAllowed</b> downwards to Child Controllers using <b>$broadcast</b></h5>
</div>
<div class="row">
<div class="col-lg-6" ng-controller="DepositController as t">
<h3>Deposit Controller</h3>
<h5>dispatches event <b>AmountDeposited</b> upwards to AccountController using <b>$emit</b></h5>
<p>
<input type="text" class="form-control" ng-model="t.amount" />
</p>
<p>
<input type="button" class="btn btn-primary btn-sm" value="Deposit" ng-click="t.deposit()" />
</p>
</div>
<div class="col-lg-6" ng-controller="WithdrawController as vm">
<h3>Withdraw Controller</h3>
<h5>dispatches event <b>AmountWithdrawn</b> upwards to AccountController using <b>$emit</b></h5>
<p>
<input type="text" class="form-control" ng-model="vm.amount" />
<span class="error" ng-if="vm.validationError">{{vm.validationError}}</span>
</p>
<p>
<input type="button" class="btn btn-primary btn-sm" value="Withdraw" ng-click="vm.withdraw()" />
</p>
</div>
</div>
</div>
<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
(function(){
\'use strict\';
angular.module(\'app\', [])
.controller(\'AccountController\', function($scope){
var vm = this;
vm.accountBalance = 0;
vm.activate = _activate;
function _activate(){
$scope.$on("AmountDeposited", _amountDepositedHandler);
$scope.$on(\'AmountWithdrawn\', _amountWithdrawnHandler);
}
function _amountDepositedHandler(event, args){
vm.accountBalance += eval(args.amount);
}
function _amountWithdrawnHandler(event, args) {
if (vm.accountBalance - eval(args.amount) < 0) {
$scope.$broadcast("WithdrawalNotAllowed", {balance: vm.accountBalance});
}
else {
vm.accountBalance -= eval(args.amount);
}
}
_activate();
})
.controller(\'DepositController\', function($scope){
var vm = this;
vm.amount = 0;
vm.deposit = _deposit;
$scope.name = \'ysr\';
function _deposit() {
alert(this.name);
$scope.$emit("AmountDeposited", {amount: vm.amount});
vm.amount = 0;
}
console.log(this);
})
.controller(\'WithdrawController\', function($scope){
var vm = this;
vm.amount = 0;
vm.validationError = "";
vm.activate = _activate;
vm.withdraw = _withdraw;
function _activate() {
$scope.$on("WithdrawalNotAllowed", _withdrawalNotAllowedHandler);
}
function _withdraw() {
vm.validationError = "";
$scope.$emit("AmountWithdrawn", {amount: vm.amount});
vm.amount = 0;
}
function _withdrawalNotAllowedHandler(event, args) {
vm.validationError = "You cannot withdraw more than $" + args.balance;
}
_activate();
});
})();
/*(function () {
\'use strict\';
angular
.module(\'app\', [])
.controller(\'AccountController\', AccountController)
.controller(\'DepositController\', DepositController)
.controller(\'WithdrawController\', WithdrawController);
AccountController.$inject = [\'$scope\'];
function AccountController($scope) {
var vm = this;
vm.accountBalance = 0;
vm.activate = _activate;
function _activate() {
$scope.$on("AmountDeposited", _amountDepositedHandler);
$scope.$on("AmountWithdrawn", _amountWithdrawnHandler);
}
function _amountDepositedHandler(event, args) {
vm.accountBalance += eval(args.amount);
}
function _amountWithdrawnHandler(event, args) {
if (vm.accountBalance - eval(args.amount) < 0) {
$scope.$broadcast("WithdrawalNotAllowed", {balance: vm.accountBalance});
}
else {
vm.accountBalance -= eval(args.amount);
}
}
_activate();
}
DepositController.$inject = [\'$scope\'];
function DepositController($scope) {
var vm = this;
vm.amount = 0;
vm.deposit = _deposit;
function _deposit() {
$scope.$emit("AmountDeposited", {amount: vm.amount});
vm.amount = 0;
}
}
WithdrawController.$inject = [\'$scope\'];
function WithdrawController($scope) {
var vm = this;
vm.amount = 0;
vm.validationError = "";
vm.activate = _activate;
vm.withdraw = _withdraw;
function _activate() {
$scope.$on("WithdrawalNotAllowed", _withdrawalNotAllowedHandler);
}
function _withdraw() {
vm.validationError = "";
$scope.$emit("AmountWithdrawn", {amount: vm.amount});
vm.amount = 0;
}
function _withdrawalNotAllowedHandler(event, args) {
vm.validationError = "You cannot withdraw more than $" + args.balance;
}
_activate();
}
})();*/
以上是关于如何封装对象,对象中有两个方法on和emit,on方法用来调用,emit方法用来调用,参数和vue的$on $emit一样的主要内容，如果未能解决你的问题，请参考以下文章
(vue.js)关于Vuejs的$emit和$on传值不成功的问题