js 通过函数传参,改变div任意属性的值

本文介绍了一种使用JavaScript动态修改HTML中DIV元素样式的技巧,通过输入属性名和属性值,可以即时更改显示效果,并提供了重置功能恢复原始样式。

在这里插入图片描述
输入属性名和属性值,会自动修改div的样式,点击重置按钮,会恢复到原来的样式。
完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<title>函数传参,改变Div任意属性的值</title>
		<style>
			body,p{margin:0;padding:0;}
			body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
			#outer{width:300px;margin:0 auto;}
			p{margin-bottom:10px;}
			button{margin-right:5px;}
			label{width:5em;display:inline-block;text-align:right;}
			input{padding:3px;font-family:inherit;border:1px solid #ccc;}
			#div1{
				color:#fff;
				width:180px;
				height:180px;
				background:#000;
				margin:0 auto;
				padding:10px;
			}
		</style>
		<script>
			window.onload = function(){
				var okBtn = document.getElementById("ok");
				var oReset = document.getElementById("reset")
				var oDiv = document.getElementById("div1");
				
				okBtn.onclick = function(){
					var propname = document.getElementsByName("prop")[0].value;
					var propval = document.getElementsByName("val")[0].value;
					oDiv.style[propname] = propval;
				}
				
				oReset.onclick = function(){//将原来的节点删除,重新添加一个新的div
					oDiv.remove();
					oDiv = document.createElement("div");
					oDiv.id = "div1";
					oDiv.innerHTML = '在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。';
					document.body.appendChild(oDiv);
				}
			}

		</script>
	</head>
	<body>
		<div id="outer">
			<p>
				<label>属性名:</label>
				<input name="prop" type="text" value="background">
			</p>
			<p>
				<label>属性值:</label>
				<input name="val" type="text" value="blue">
			</p>
			<p>
				<label></label>
				<button id="ok">确定</button>
				<button id="reset">重置</button>
			</p>
		</div>
		<div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div>
	</body>
</html>
<think>好的,我现在需要回答用户关于Vue.js组件间传参方法及示例的问题。用户可能已经看过一些资料,但需要更清晰的总结和实例。首先,我应该根据提供的引用内容来整理不同的传参方式,并确保覆盖Vue2和Vue3的不同方法。 首先,用户提供的引用中提到了Props父传子、$emit子传父、provide/inject跨级通信、Vuex、Pinia、$refs、$children、$parent、$attrs/$listeners、事件总线$bus等方法。我需要将这些方法分门别类,分别针对Vue2和Vue3的情况进行说明,尤其是Vue3中的变化,比如组合式API和Composition API的影响。 接下来,我需要确保每个方法都有对应的示例代码,这样用户能更直观地理解。比如,在Props部分,父组件如何通过属性传递数据,子组件如何接收。然后$emit的例子需要展示子组件触发事件,父组件监听并处理。对于Vue3的setup语法,需要调整示例代码,使用defineProps和defineEmits。 然后,provide/inject部分需要说明祖组件和后代组件之间的传参,注意Vue3中需要显式导入provide和inject函数。Vuex和Pinia作为状态管理工具,应该强调它们适合复杂应用,并给出基本的使用示例,比如如何在组件中访问状态和提交变更。 此外,$refs和$parent等方法虽然可用,但需要注意它们的使用场景和潜在问题,比如直接操作DOM或父组件可能带来的耦合问题。事件总线在Vue3中可能不再推荐,需要提到第三方库如mitt的替代方案。 还要注意引用中的内容,比如引用[3]详细列出了各种传参方法,需要正确引用相关内容,并在适当的地方添加引用标记。同时,确保回答结构清晰,分点列出,每个方法都有简要说明和代码示例,帮助用户逐步理解。 最后,生成的相关问题需要与组件通信相关,可能涉及不同版本的区别、最佳实践或常见问题,比如Vue2和Vue3传参的差异,如何选择合适的方法,或者处理边界情况如跨多级组件通信的问题。需要确保问题具有针对性,能够引导用户进一步学习。 总结步骤: 1. 整理组件间传参的各种方法,区分Vue2和Vue3。 2. 为每种方法编写简明解释和示例代码。 3. 引用提供的参考资料,正确标注来源。 4. 生成相关问题,覆盖不同方法和常见疑问。 5. 检查语法和格式,确保符合用户要求,如LaTeX格式正确,使用中文回答。</think>### Vue.js 组件间传参方法及示例 #### 1. **Props 父传子(推荐)** 父组件通过属性向子组件传,子组件通过`props`接收。 **Vue2/Vue3 示例**: ```javascript // 父组件 <ChildComponent :message="parentMsg" /> // 子组件(Vue2/Vue3选项式API) export default { props: ['message'], template: `<div>{{ message }}</div>` } // Vue3 组合式API(使用`defineProps`) <script setup> const props = defineProps(['message']); </script> ``` #### 2. **$emit 子传父(推荐)** 子组件通过事件向父组件传递数据。 **Vue2/Vue3 示例**: ```javascript // 子组件 <button @click="$emit('update', data)">提交</button> // 父组件 <ChildComponent @update="handleUpdate" /> // Vue3组合式API(使用`defineEmits`) <script setup> const emit = defineEmits(['update']); emit('update', data); </script> ``` #### 3. **provide/inject 跨级通信(推荐)** 祖组件通过`provide`提供数据,后代组件通过`inject`注入。 **Vue3 示例**: ```javascript // 祖组件 <script setup> import { provide } from 'vue'; provide('key', data); </script> // 后代组件 <script setup> import { inject } from 'vue'; const injectedData = inject('key'); </script> ``` #### 4. **Vuex/Pinia 状态管理(推荐)** 全局状态管理,适用于复杂应用。 **Vue3 + Pinia 示例**: ```javascript // store.js import { defineStore } from 'pinia'; export const useStore = defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }); // 组件中使用 import { useStore } from './store'; const store = useStore(); store.increment(); console.log(store.count); ``` #### 5. **$refs 父调子方法(推荐)** 父组件通过`ref`直接调用子组件方法。 **Vue2/Vue3 示例**: ```javascript // 父组件 <ChildComponent ref="childRef" /> <script> this.$refs.childRef.childMethod(); </script> // 子组件 methods: { childMethod() { /* ... */ } } ``` #### 6. **事件总线(Vue2 使用)** 通过全局事件总线实现任意组件通信。 **Vue2 示例**: ```javascript // main.js Vue.prototype.$bus = new Vue(); // 组件A发送事件 this.$bus.$emit('eventName', data); // 组件B监听事件 this.$bus.$on('eventName', (data) => { /* ... */ }); ``` #### 7. **$attrs/$listeners 跨级通信(Vue2)** 透传未在`props`中声明的属性和事件。 **Vue2 示例**: ```javascript // 祖组件 <Child :title="title" @custom-event="handleEvent" /> // 中间组件 <Grandchild v-bind="$attrs" v-on="$listeners" /> // 孙组件 props: ['title'], mounted() { this.$emit('custom-event'); } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值