Vue组件和插槽使用

最新推荐文章于 2023-08-14 15:38:06 发布
VIP文章 最新推荐文章于 2023-08-14 15:38:06 发布
阅读量548 收藏
点赞数 1
分类专栏： Vue.js Node.js Javascript 文章标签： vue表单  vue组件
本文链接：https://blog.csdn.net/weixin_43487066/article/details/102729468
版权

文章目录


表单

针对一般元素，比如div,span 、p、 img等,采用的是单向绑定： v-bind 只要把数据绑定到视图中就可以，但是对于表单这种交互比较强的元素或组件，我们一般可能需求双向绑定，即：用户对视图元素的操作同时更新数据。

v-model 在内部为不同的输入元素使用不同的属性和事件来处理数据

  • text & textarea
  • checkbox & radio
  • select
text 和 textrea
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="v1">
        <textarea name="" id="" v-model="v2" cols="30" rows="10"></textarea>
    </div>

    <script>
        let app = new Vue({
    
            //el指定id为app的元素
            el: "#app",
            //template替换的是id为app的元素的所有内容

            data: {
    
                v1:'aaa',
                v2:'bbbb'
            },
            
        })
    </script>
</body>

</html>

效果图如下


image.png

checkbox 和radio

checkbox 和 radio 使用checked属性和change事件

  • 单选框绑定一个值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="radio" name="" id="" v-model="v3"value="男">男
        <input type="radio" name="" id="" v-model="v3" value="女">女
        <button @click="getData">按钮</button>
    </div>

    <script>
        let app = new Vue({
    
            //el指定id为app的元素
            el: "#app",
            //template替换的是id为app的元素的所有内容

            data: {
    
                v1:'aaa',
                v2:'bbbb',
                v3:'男'
            },
            methods:{
    
                getData(){
    
                    console.log(this.v3);
                }
            }
            
        })
    </script>
</body>

</html>

效果如下
image.png

  • 多选框绑定到一个布尔值或者数组
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="radio" name="" id="" v-model="v3"value="男">男
        <input type="radio" name="" id="" v-model="v3" value="女">女
        <button @click="getData">按钮</button>
        <!--  -->
        <hr>
        <!-- 单选 -->
        <input type="checkbox" v-model="v4">同意
        <hr>
        <!-- 多选 -->
        <input type="checkbox" name="" id="" v-model="v5" value="足球">足球
        <input type="checkbox" name="" id="" v-model="v5" value="篮球">篮球
    </div>

    <script>
        let app = new Vue({
    
            //el指定id为app的元素
            el: "#app",
            //template替换的是id为app的元素的所有内容

            data: {
    
                v1:'aaa',
                v2:'bbbb',
                v3:'男',
                v4:true,
                v5:['足球','音乐']
            },
            methods:{
    
                getData(){
    
                    console.log(this.v3);
                }
            }
            
        })
    </script>
</body>

</html>

效果如下
image.png

select

select字段将value 作为prop并将change作为事件

  • 单选绑定到值，多选绑定到数组
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 单选 -->
        <select name="" id="" v-model="v3">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <!-- 多选 -->
        <select name="" id="" v-model="v5" multiple>
            <option value="足球">足球</option>
            <option value="音乐">音乐</option>
        </select>
        <button @click="getData">按钮</button>
    </div>

    <script>
        let app = new Vue({
    
            //el指定id为app的元素
            el: "#app",
            //template替换的是id为app的元素的所有内容

            data: {
    
                v1:'aaa',
                v2:'bbbb',
                v3:'女',
                v4:true,
                v5:['足球','音乐']
            },
            methods:{
    
                getData(){
    
                    console.log(this.v3,this.v5);
                }
            }
            
        })
    </script>
</body>

</html>

效果如下
image.png

computed与watch

computed

在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的一种情况，vue定义一个专门用来处理这种派生的数据的选项， computed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport
最低0.47元/天 解锁文章
汇而不置
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 利用radio实现按钮效果
gmHappy
09-07 941
默认效果 切换效果 代码 <template> <div id="button-border"> <div v-for="(item, index) in radios" :key="item.id"> <div class="buttonDefalt" :class="{ buttonActive: item.isChecked }"> <label class="label" >&
使用Vue封装一个radio组件、RadioGroup组件
05-05 3468
一、封装radio组件 radio组件基本框架和样式： <template> <label class="one-radio" :class="{'is-checked':label == value}"> <span class="one-radio_input"> <!-- <span class="one-radio_inner"> --> <input type="
详解Vue组件插槽的使用以及调用组件内的方法
10-17
在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点，有需要的朋友们参考下。
详解Vue组件之作用域插槽
10-17
主要介绍了Vue组件之作用域插槽，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
从零实现Vue的组件库（十四）- RadioGroup 实现
weixin_34261739的博客
02-05 4770
基于 组件进行二次封装的 RadioGroup 组件 RadioGroup 组件的难点在于： radio 与 radioGroup 之间的联动关系、数据绑定关系，使得 radio 可以单独使用或者组合； 利用插槽可以方便扩展 radio 。 1. 实例 代码 &lt;!-- 基础用法 --&gt; &lt;fat-radio v-model="otherValue" :value...
【vue】组件中的插槽使用
python全栈
11-08 2191
直接写在组件中的内容，会填充到默认的插槽中（没有用name属性起名字的插槽）在组件中定义插槽的时候，给插槽中预留位置用在接收data中的传过来的数据；其他组件在使用这个组件的时候，可以获得该传递过来的数据。父组件中通过这种形式去子组件中填充内容(固定的)
vue(六)插槽
m0_51371862的博客
10-14 780
1. 什么是插槽 插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽。 2. 插槽的使用 在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。示例代码如下： <template> <p>这是MyCom1组件的p标签</p> <!-- 通过slot标签，为用户预留内容占位符（插槽） --> <slot>.
Vue -- 插槽
emmmm.....
04-27 1万+
文章目录插槽1. 插槽2. 体验插槽的基础用法2.1 没有预留插槽组件标签内的内容会被丢弃2.2 后备内容3. 具名插槽3.1 为具名插槽提供内容3.2 具名插槽的简写形式4. 作用域插槽4.1 解构作用域插槽的 Prop把information的数据解构出来4.2 声明作用域插槽4.3 使用作用域插槽 插槽 1. 插槽 插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。 可以把插槽认为是组件封装期间，为用户预留的内容的占位符。 2
vue基础扩展——插槽
weixin_52629158的博客
05-24 1349
后面我们做项目用到的组件库比如element-ui,vant-ui都频繁用到的插槽，Vue的插槽主要有匿名插槽，具名插槽，作用域插槽三种，下面我们分别来认识一下他们。="uPage" 实现的作用是：双向数据绑定，即：子传父，子组件将数据传递给父组件。插槽插槽实质是对子组件的扩展，通过<slot>插槽-----向组件内部“指定位置” 放置内容。作用域插槽（带数据的插槽）:绑定数据的插槽slot插槽scope作用域。组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力。
Vue——插槽
weixin_43599321的博客
03-28 2123
插槽的作用：Vue插槽是Vue中常见的一种组件间的相互通信方式，作用是让父组件可以向子组件指定位置插入html结构，适用于，在要接收数据的组件页面通过标签来表示，简单来说，。插槽的基本使用：这里我们选定App.vue作为父组件，Card.vue作为子组件，作为演示插槽基本使用的代码文件。App.vue运行结果：从上面的运行结果可以看到，插槽的基本使用是子组件自身内容正常显示，插入的内容是父组件向子组件插入的内容，并且插入的内容可以显示多条，如果没有插入内容，将显示
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
08-27
主要介绍了使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件 ,非常不错，具有参考借鉴价值，需要的朋友可以参考下
详解vue slot插槽的使用方法
08-30
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
最新发布
weixin_58070962的博客
08-14 2491
单选按钮（Radio Button）是一种常见的HTML表单元素，用于让用户在一组选项中选择单个选项。每个单选按钮通常与一个相关的文本标签相连，以便用户知道每个选项的含义。radio单选按钮和Checkbox复选框都是制作试卷很方便的好工具好方法，单选按钮还有的作用是让用户在一组选项中选择一个选项，并将其值作为表单数据传递给后端进行处理。它可以用于数据筛选、选项说明以及用户界面控制等方面。
Vue插槽slot：默认插槽、具名插槽、作用域插槽
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
12-19 2111
插槽 1.什么插槽 插槽也成为内容分发 用slot这个内置组件 2.插槽是干什么的 在子组件中来显示父组件中的数据 3.插槽怎么用 4.在子组件中用括起来一个区域 5.在父组件的子组件标签中给插槽传递数据，如果父组件不传输数据那6.么直接显示标签中的数据 7.插槽的分类 插槽可以分为三类 默认插槽 具名插槽 作用域插槽 默认插槽 只要有位置 就会显示父组件传递来的数据 具名插槽 给slot标签起名 然后在父组件传递数据的时候根据名字查找就行 示例：子组件 <template> <div&g
vue自定义radio组件
u012732909的博客
10-20 1576
原生html的radio标签太丑了，实际开发中都需要自定义radio。如何实现呢？ 思路很简单，我们需要另外做一套好看的样式，然后把原来的radio标签隐藏掉即可。 静态结构 components/myradio.vue: <template> <div class="my-radio"> <span class="my-radio__input"> <span class="my-radio__inne
【Vue插槽详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
03-15 2万+
个人对Vue中插槽的见解，详细的介绍了不同种类的插槽方法，以及不同类型的插槽作用
VUE组件与插槽
m0_60027772的博客
07-16 1257
组件生效于vue的挂载区内，不管是全局还是局部自定义组件的内部不可以写内容，除非你用插槽组件内部，只能有一个根元素组件也可以直接写成自闭标签，但是这样写，那么后面的组件便不再生效决定组件是块级元素还是行级元素与里面的根标签有关。.........
Vue 组件插槽
Mr.小灰狼_随笔
01-13 2156
目录 一、组件插槽 1.1、单个插槽 2.2、具名插槽 2.3、作用域插槽 插槽，我要钻到你的怀里 默认插槽 具名插槽 作用域插槽 插槽默认值
Node.js中的get请求和post请求的识别
汇而不置的博客
04-08 1621
get请求 GET请求传参通过URL，POST请求传参通过HTTP上行报文。GET请求不安全。 GET请求的参数在URL中。 Node.js获取get请求参数。 url.parse(req.url,true).query 安装小型服务器环境 $ cnpm install serve-static --save $ cnpm install finalhandler --save &...
vue2封装组件使用插槽
05-30
当我们封装一个 Vue 组件时，可以使用插槽（slot）来让组件的使用者可以在组件内部插入内容。使用插槽可以让我们的组件更加灵活和可复用。 在组件内部，我们可以使用 `slot` 标签来声明一个插槽。例如： ```html <template> <div class="my-component"> <h2>这是组件的标题</h2> <slot></slot> </div> </template> ``` 上面的代码中，我们在组件的模板中使用了 `slot` 标签，这个标签表示这个组件需要一个插槽。使用这个组件的时候，我们可以在组件标签内部插入任意的内容，这些内容会被插入到 `slot` 标签的位置上。 例如，我们可以这样使用这个组件： ```html <template> <div> <MyComponent> <p>这里是插入到组件中的内容</p> </MyComponent> </div> </template> ``` 这样，`<p>这里是插入到组件中的内容</p>` 就会被插入到组件的模板中的 `slot` 标签的位置上。 如果我们需要多个插槽，可以给 `slot` 标签添加一个 `name` 属性来区分不同的插槽。例如： ```html <template> <div class="my-component"> <h2>这是组件的标题</h2> <slot name="header"></slot> <div class="content"> <slot></slot> </div> <slot name="footer"></slot> </div> </template> ``` 上面的代码中，我们声明了三个插槽，分别是名为 `header`、`default` 和 `footer` 的插槽。使用这个组件时，我们可以这样插入内容： ```html <template> <div> <MyComponent> <template v-slot:header> <h3>这是头部插槽的内容</h3> </template> <p>这里是默认插槽的内容</p> <template v-slot:footer> <p>这是底部插槽的内容</p> </template> </MyComponent> </div> </template> ``` 上面的代码中，我们使用了带 `v-slot` 的 `<template>` 标签来指定要插入哪个插槽，例如 `v-slot:header` 表示要插入到名为 `header` 的插槽中。在 `<template>` 标签内部，我们可以插入任意的内容，这些内容会被插入到对应的插槽位置上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值