首页 \ 问答 \ 如何从App.vue访问组件属性(How to access a component property from App.vue)

如何从App.vue访问组件属性(How to access a component property from App.vue)

我使用vue-loader来帮助我安装vue和webpack我有一个名为App.vue的文件

在App.vue中,我添加了一个名为widget的组件。 如果我单击某个按钮,则会设置一个设置btnClicked = true的函数,从而显示小部件

<widget v-show="btnClicked"></widget>

但我也希望该函数访问widgetShowMe ,它是我组件中的属性。

我希望在我的App.vue激活的功能也设置widgetShowMe = true我试过这个但它没有用

methods:{
  btnClickedFunc () {
    this.btnClicked = true;
    Widget.widgetShowMe = true; 
  }
}

I used vue-loader to help me install vue and webpack I have a file called App.vue

In App.vue I added a component called widget. If I clicked some button there's a function that set the btnClicked = true hence the widget appears

<widget v-show="btnClicked"></widget>

but I also want that function to access the widgetShowMe, it's a property in my component.

I want the function activated in my App.vue to also set widgetShowMe = true I tried this but it didn't work

methods:{
  btnClickedFunc () {
    this.btnClicked = true;
    Widget.widgetShowMe = true; 
  }
}

原文:https://stackoverflow.com/questions/42626810
更新时间:2022-02-28 14:02

最满意答案

我使用Angular事件来处理这样的事情 - 例如:

    .controller('parentCtrl', function($scope,$rootScope) {
        $rootScope.$on('loading',function(e,_statusObj.loading) {
            $scope.loading = _statusObj.loading;
            if(!!_statusObj.msg) {
                alert(_statusObj.msg);
            }
        });
    })
    .controller('childCtrl', function($scope,$http) {
        $scope.myAjaxCall = function(_url,_data) {
            $scope.$emit('loading',{ loading: true});
            $http.post(_url,_data).success(function(_response) {
                $scope.$emit('loading',{ loading: false });
            })
            .error(function(_error) {
                $scope.$emit('loading',{
                    loading : false,
                    msg     : _error.message
                });
            });
        }
    });

I managed to get the interceptor working. Apparently we CAN access the config file in all interceptor phases:

/******************************************
    SETUP BUSY/ERROR/DATA HTTP INTERCEPTOR
*******************************************/
.config(function($httpProvider){

    $httpProvider.interceptors.push(function($q) {
      return {

        request  : function(config) {

            if(config.ctrl){
                config.ctrl.busy   = true;
                config.ctrl.error  = false;
                config.ctrl.data   = undefined;
            }

            return config;
        },
        response : function(response) {

            if(response.config && response.config.ctrl){
                response.config.ctrl.busy = false;
                response.config.ctrl.data = response.data;
            }

            return response;
        },

        responseError : function(response){

            // note: maybe use a different error message for different kinds of responses?
            var error = response.status + " "+response.statusText+" - "+response.data;

            if(response.config && response.config.ctrl){
                response.config.ctrl.busy = false;
                response.config.ctrl.error = error;
            }

            return $q.reject(error);
        }
      };
    });

})

相关问答

更多
  • 我认为你需要使用承诺来回报错误。 将$q添加到您的拦截器工厂。 像这样 $provide.factory('MyHttpInterceptor', function ($q){ ... }) 然后得到responseError() function responseError(response) { if (response.status === 401) { $rootScope.$broadcast('unauthorized'); } return $q.reject(re ...
  • 您需要在authInterceptor工厂方法中过滤掉所需的请求 ['/whatever/1', '/whatever/2', '/whatever/3'].forEach(function(value){ if (response.config.url.startsWith(value)) { // do something } }) return response; You need the filter out the requests you want in the authInte ...
  • 正如手册所说, 请求:使用http配置对象调用拦截器。 该函数可以自由修改配置对象或创建新对象。 该函数需要直接返回配置对象,或者包含配置或新配置对象的promise。 所以它应该是: function requestInterceptor(req) { return $injector.get('tokenService').accessToken().then(function(res) { ... return req; }, functio ...
  • 你的代码流是这样的: 0)AngularJS定义$httpProvider ; 1)你定义loginService ,它取决于$httpProvider注入$http ; 2)你定义一个依赖于loginService的HTTP拦截器并改变$http工作方式; 3)您定义注入$http其他服务。 看看这个函数,任何AngularJS提供者必须提供的$get方法。 每次你的服务将$http作为依赖项注入并返回 $http时调用它。 现在,如果你回到第396行,你会看到在调用$get时会构建一个reversedI ...
  • 您在导入的axios实例上调用拦截器,但它需要在您创建的实例上。 无论如何,调用window.axios = axios.create()是非常糟糕的风格,你应该不惜一切代价避免它。 如果您希望它全局可用,则应将其绑定到Vue Prototype。 更好的方法是将其移出另一个模块: const instance = axios.create({ baseURL: 'http://localhost:8080', timeout: 10000, params: {} // do not ...
  • 有类似的问题。 我的代码有点不同,但想法是一样的,试试这个 var deferred = $q.defer(); authService.refreshToken().then(function () { $http(errorResponse.config).then(deferred.resolve, deferred.reject); }, function () { authService.logOut().then(deferred.reject); ...
  • 我使用Angular事件来处理这样的事情 - 例如: .controller('parentCtrl', function($scope,$rootScope) { $rootScope.$on('loading',function(e,_statusObj.loading) { $scope.loading = _statusObj.loading; if(!!_statusObj.msg) { ale ...
  • 也许你可以试试这个。 public String intercept(ActionInvocation invocation) throws Exception { final ActionContext context = invocation.getInvocationContext(); Map parameters = (Map)context.get(ActionContext.PARAMETERS); Map< ...
  • 当您最初有一个经过身份验证的请求时,会有一个OPTIONS类型的请求在调用的预检期间完成。 这是服务器与服务器的一种握手,弄清楚它是否接受这种类型的请求。 如果一切顺利,它将执行您最初做的实际GET,POST等请求。 我相信那就是你正在经历的。 编辑 您的问题可能以您设置标题的方式存在。 尝试以下操作 request = request.clone({ headers: headersConfig }); When you have an authenticated request i ...
  • 为什么不在路由更改事件$on观察$on并将当前/以前的路径绑定到$window或全局$scope变量? 我还没有阅读上面的所有代码,但这就是我在应用程序中处理位置的方法 : $scope.$on('$routeChangeSuccess', function(evt, current, previous){ var routeData = {}; //prop: uriSegment //desc: get all uri segments for current location ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)