SCRIPT65535:意外地调用了方法或属性访问 问题解决

本文探讨了在IE8浏览器环境下,进行DOM操作时常见的两种错误:一是尝试修改DOM对象不存在的属性,如使用html()方法替代val()方法;二是标签闭合不当导致的后续元素操作错误。文章提供了具体的代码示例和解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

SCRIPT65535:意外地调用了方法或属性访问

浏览器环境为IE8,原因在于尝试操作DOM的非法属性

第一种情况,操作了一个DOM不该有的属性

<input type="text" id="test">
如果要改变这个dom的值应该是修改它的value属性

$('#test').val('hello');
但是如果写成了

$('#test').html('hello');

在ie8以上的浏览器也OK,给你识别纠正了,但是在ie8以下就不行了

第二种情况,标签的闭合上

<input type="text" id="test"></input>
<p>hello</p>

由于编辑器的自动补全,往往会忽略一些细节上的错误例如为input自动加了闭合标签,如果只操作这个dom的值无影响,但是如果操作下个同级元素就会报错了例如

$('#test').next().html('hello');

当debug到test的下一级标签时,便会发现这个dom的nodeName是input而不是p,input操作html属性是不合法的,因此就报错;了。解决方法就是把input的闭合标签干掉
转自:https://blog.youkuaiyun.com/yc123h/article/details/51337356?utm_source=copy 

### Vue3 子组件调用父组件方法的最佳实践 在 Vue3 中,子组件可以借助 `props` 来接收来自父组件的方法并执行它。这种方式简单直观,在实际项目中被广泛采用[^1]。此外,尽管 Vue3 引入了 Composition API 和新的语法特性,但传统的模板驱动方式依然适用,并且 `$emit` 的核心机制未发生根本变化[^2]。 以下是具体的实现细节以及最佳实践: #### 实现过程 1. **父组件定义方法并通过 `props` 将其传递到子组件** 父组件需要将自身的函数作为属性绑定至子组件实例上。该函数会成为子组件的一个可访问的 prop 属性。 2. **子组件通过 `props` 接收父组件方法并在内部调用** 子组件声明接受此方法的 `prop` 定义,并在其逻辑中按需调用这个接收到的回调函数。 --- #### 示例代码 ##### 父组件 (ParentComponent.vue) ```vue <template> <div> <h1>父组件</h1> <!-- 使用 v-bind(:) 绑定 callParentMethod 到子组件 --> <ChildComponent :call-parent-method="handleFromChild" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleFromChild(message) { console.log(`父组件方法调用了! 收到来自子组件的消息: ${message}`); } } }; </script> ``` ##### 子组件 (ChildComponent.vue) ```vue <template> <div> <h2>子组件</h2> <button @click="invokeParentMethod">点击调用父组件方法</button> </div> </template> <script> export default { props: { // 声明从父级传来的函数型 prop callParentMethod: { type: Function, required: true } }, methods: { invokeParentMethod() { const messageToPass = '这是子组件发来的消息'; this.callParentMethod(messageToPass); // 调用父组件方法并将参数传递过去 } } }; </script> ``` 上述例子展示了完整的父子组件交互流程:当用户点击按钮时,子组件内的 `invokeParentMethod()` 方法会被触发;随后,它调用了由父组件注入的 `callParentMethod` 函数,并附带额外的数据作为输入参数。 --- #### 关键点解析 - **Prop 验证的重要性**: 在子组件中对接收的 `props` 进行类型验证是非常重要的安全措施之一。这样不仅可以防止意外错误的发生,还能提升代码质量与维护性[^4]。 - **动态参数支持**: 如果希望让每次调用都携带不同的信息,则可以在调用前即时生成所需的内容再提交给目标方法处理[^3]。 - **Composition API 可选方案**: 对于复杂场景者更灵活的需求来说,也可以考虑利用组合式 API (`setup`) 结合响应式对象来完成类似的跨层通讯操作。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值