vue 登录组件

最新推荐文章于 2024-04-02 05:42:36 发布

瑾妍小哥哥

最新推荐文章于 2024-04-02 05:42:36 发布

阅读量1.4k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41397118/article/details/121233283

版权


<!DOCTYPE html>
<div id="example">
 <login @son="handleClick" :input_style="{width:'100%'}" />
</div>


<script type="module">
//  import Vue from "./js/vue.esm.browser.js";
 import Vue from "https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.esm.browser.min.js";

 Vue.component("login", {
  props:['input_style'],
  inheritAttrs: false,///不为false 子组件最外层会有$attrs
  template: `
  <main style="display:flex;justify-content:center;align-items: center;height: 80vh;">
    <div v-bind="$attrs" style="width:500px; padding:40px;background-color: white;box-shadow: 2px 2px 10px #808080;">
      账号：<input ref="name" :style="input_style" />
      密码：<input ref="pwd"  :style="input_style">
      <br>
      <br>
      <input @click="$emit('son',$refs.name.value,$refs.pwd.value)" style="width:101.7%;text-align:center" type="submit" value="登录"/>
    </div>
  </main>
  `,
  mounted() {
    console.log('this.$attrs', this.$attrs)
    console.log(this.$props)
  },
 });

 let t = new Vue({
  el: "#example",
  data() {
   return {
   };
  },
  methods: {
   handleClick(name,pwd) {
    console.log(name,pwd);
    alert(`${name};${pwd}`)
   },
  },
 });
</script>

优惠劵

瑾妍小哥哥

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 登录组件

<!DOCTYPE html><div id="example"> <login @son="handleClick" :input_style="{width:'100%'}" /></div><script type="module">// import Vue from "./js/vue.esm.browser.js"; import Vue from "https://cdn.bootcdn.net/ajax/libs.
复制链接

扫一扫