在两个html页面之间传值小示例

最近在搞前端的一些开发,在两个页面之间进行传值,虽然搜了写资料但是不是自己想要的,因为用到了一些框架,所有内容相当于在一个html中,与普通的两个独立的html页面直接的传递值的方法不太一样,记之,以备用。

a.html 如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Document</title>

    <script>
      function   to(){
        var  getval =document.getElementById("cc").value;
        window.location.href="b.html?cc="+getval;
      }
    </script>
</head>
<body>
<input type="text" id ="cc" >
 <input type="button"  value="a"  οnclick="to()" >
</body>
</html>

b.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
  var thisURL = document.URL;
  var  getval =thisURL.split('?')[1];
  var showval= getval.split("=")[1];
  function  showvalf(){
     alert(showval);
     document.getElementById('ee').value=showval;
  }
</script>
</head>
<body οnlοad="showvalf()">
<input type="text"  id ="ee" />
</body>
</html>

原理是解析当前页面的url,并进行解析分割,获取相关的参数。






在Vue3中,可以使用`<component>`标签来动态地渲染组件。在切换组件时,可以在`<component>`标签上使用`:is`属性来指定要渲染的组件。同时,可以使用`v-bind`指令来向组件传递数据。 以下是一个示例代码: ```html <template> <div> <button @click="showComponentA">显示组件A</button> <button @click="showComponentB">显示组件B</button> <component :is="currentComponent" :data="data"></component> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; export default defineComponent({ components: { ComponentA, ComponentB, }, setup() { const currentComponent = ref('ComponentA'); const data = ref({ message: 'Hello, World!' }); function showComponentA() { currentComponent.value = 'ComponentA'; data.value = { message: 'Hello, ComponentA!' }; } function showComponentB() { currentComponent.value = 'ComponentB'; data.value = { message: 'Hello, ComponentB!' }; } return { currentComponent, data, showComponentA, showComponentB, }; }, }); </script> ``` 在上面的代码中,我们使用了`<component>`标签来渲染两个组件`ComponentA`和`ComponentB`。在`<component>`标签上使用`:is`属性来指定当前要渲染的组件,并使用`:data`属性来向组件传递数据。在`setup`函数中,我们使用`ref`函数来定义状态变量`currentComponent`和`data`,并在`showComponentA`和`showComponentB`函数中更新它们的,以便在切换组件时更新页面和向组件传递数据。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值