href传值问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了href传值问题相关的知识,希望对你有一定的参考价值。

用 <a href=" <%=request.getContextPath()%>/index.jsp?noteId= <%=note.getId()%>">传递参数,
在浏览器地址中可以得到传递的参数,是http://localhost:8080/bbs/index.jsp?noteId=2,
但是在index.jsp页面中,接收参数用 <%=request.getAttribute("noteId") %>页面输出的值是null,
为什么

你这个是超连接传植 用4个作用域(pageContext,request,session,application)都是获取不到的 因为他们都必须在作用域存取之后 才能用<%=request.getAttribute("noteId") %>获取
你只能用用 request.getParameter ("noteId")。

getAttribute("noteId") 这种一般是存在(pageContext,request,session,application)中的
参考技术A 链接后面传值和Form表单的Method设置成Get时都是用
request.getParameter ("noteId")取得

getAttribute()也并不是像楼上说的一般都在Session中
很多框架中的标签就是通过getAttribute和getParameter一起使用来取得Action中的值
参考技术B <%=request.getAttribute("noteId") %>这个接受的是
<%=request.setAttribute("noteId",**) %>传的值你这是通过uri传值,那么在接受页面应该用request.getParameter ("noteId") 来接受值!
参考技术C href传值,接收使用request.getParameter 参考技术D 对~
用 request.getParameter ("noteId")。

getAttribute("noteId") 这种一般是存在session中的。

vue多层嵌套组件传值

说到vue组件传值,大概分为以下几种情况

1.父传子

父组件通过属性绑定将值传给子组件,子组件通过props进行接收

2.子传父

父组件通过v-on监听方法,子组件通过$emit触发父组件的方法,将数据作为回调函数的参数传给父组件

3.兄弟组件传值

通过定义一个eventBus通过on和emit机制来实现事件的绑定和触发,实现数据的流动。现在常见的是用vuex来实现数据的共享和流动。

多层嵌套组件传值

问题描述:

除此外,今天遇到一个情况,组件A,B,C,D,四个组件之间的关系为嵌套关系,即组件A>组件B>组件C>组件D,但是组件D中想要触发组件A中的方法。

因为一开始的时候没有把设计到的数据放到vuex中且是做的公共组件的封装,放在vuex里面也不合适。在vue的官网上也看了,看到了inheritAttrs属性,第一开始没有看明白文档描述的意思,后来在segmentfault中看到一篇讲vue多层嵌套传值的文章。借助里面的demo和vue官网,终于好像有点明白多层嵌套传值的意思。

解决思路

一开始也有考虑过子组件一层一层的往上emit,直到A组件监听到这个事件。但是考虑到B组件和C组件作为中间组件并没有用到这个方法,只单纯定义个方法去吧数据emit到上一层组件中。每一层组件都需要去实现时间监听,按道理这个方法也可以实现,但是总觉得方法有点笨,想着把这种方法作为planB,先尝试一下,如果找不到合适的解决方案的话,再采纳这个方案。
我想实现的方案简单来说就是D可以触发A中的方法,但是中间组件不需要帮忙传递。

解决过程

在解决问题之前,首先需要在vue官网上了解几个概念

  • inheritAttrs

    默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 `inheritAttrs` 到 `false`,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property `$attrs` 可以让这些 attribute 生效,且可以通过 `v-bind` 显性的绑定到非根元素上。

      在一开始的时候我读了两遍都没有读懂inheritAttrs的描述(理解能力真的稍微有点差)。我个人的理解是这样的。
      假如A组件里面引用了B组件,A组件是父组件,B组件是子组件,A组件给B组件传值通过属性绑定,B组件通过prop接收,当然B组件肯定只会接受自己需要的属性。假如B组件不需要name属性,但是A组件偏偏要传给B组件,但是B组件并没有在props中接收,那么这个值肯定是传过来了呀,但是那里去了呢,然后再来读这段话,“父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。”,意思就是name属性没有在props里接受,就会自动绑定到B组件的根组件上去。但是既然B组件既然不在props中接收他,肯定是没有用,那肯定不期望有这样的事情发生,“通过设置 inheritAttrsfalse,这些默认行为将会被去掉。”原来设置为false就可以阻止这样的行为。
      回到我们的需求,组件B和组件C作为一个中间组件,并不需要接收,就可以设置inheritAttrs为false即可实现

  • vm.$attrs
    包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
      父组件传值给子组件,子组件通过prop接受了一部分,但是我们如何可以获取到没有接收的那部分呢,哈哈,就是通过$attrs。里面包含所有父作用域的绑定,划重点!!!, 可以通过v-bind="$attrs"传入内部组件
      这样离我们的需求是不是越来越近了,属性就可以往内部组件传递那事件监听还远吗!!!
  • $listeners
    包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
      是的,没错他来了, 通过 v-on="$listeners" 传入内部组件!!!
      了解完这三个概念,我的问题就迎刃而解。

总结

1.假如在D中想触发A中的handlePreview方法,首先A组件对该方法进行监听
2.在B组件和C组件中设置inheritAttrs为false,不做接收,然后把数据和事件往内部组件接着传(我本次需求只有方法,没有属性,为了加深学习印象就把 v-bind="$alert"一起传递了)
3.到了D组件中,通过$emit触发A组件中的方法,顺利完成我的需求。
以下内容为代码片段(vue语法),大概表述出大概意思。
参考文章链接:vue多级嵌套组件传参
A组件

<template>
     <div> A组件
     <BComponent @handlePreview="preview"</BComponent>
     </div>
 </template>

B组件

<template>
    <div> B组件
    <CComponent v-bind="$alert" v-on="$listeners" ></CComponent>
    </div>
</template>
<script>
export default {
 name: \'b-component\', 
 inheritAttrs: false
}
</script>

C组件

<template>
    <div> C组件
    <DComponent v-bind="$alert" v-on="$listeners" ></CComponent>
    </div>
</template>
<script>
export default {
 name: \'c-component\', 
 inheritAttrs: false
}
</script>

D组件

<template>
    <div> D组件
    <button @click="handleClick"></button>
    </div>
</template>
<script>
export default {
 name: \'c-component\', 
 methods:{
   handleClick(){
   this.$emit(\'handlePreview\')
   }
 }
}
</script>

以上是关于href传值问题的主要内容,如果未能解决你的问题,请参考以下文章

JS中location.href传值问题

NSNotificationCenter传值

属性传值,协议传值,block传值,单例传值四种界面传值方式

iOS 页面跳转传值,属性传值,代理传值,代码块传值,单例传值,通知传值

界面通信之属性传值代理传值

页面传值:属性,协议,Block传值