Vue的组件，样式，事件处理，插槽详解

最新推荐文章于 2023-03-31 17:16:36 发布
最新推荐文章于 2023-03-31 17:16:36 发布
阅读量133 收藏 1
点赞数 2
文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55362295/article/details/120378677
版权

表单绑定

    <div id="app">
        <input type="text" name="username" v-model.lazy.trim="name" value="" />
        <p>{{name}}</p>

        <textarea rows="3" cols="20" v-model="uname"></textarea>
            <p>{{uname}}</p>
            <span v-for="item in phone" >
                {{item}}
        <input type="checkbox" name="phone" id="" :value="item" v-model="checkPhone" />
        </span>
        <p>{{checkPhone}}</p>


        <select v-model="choose">
            <option :value ="item" v-for="item in city" >{{item}}</option>
        </select>
        <p>{{choose}}</p>


        <!--  转换为字符串-->
            <input type="text" name="age" v-model.number="age" value=""/>

    </div>

    <script type="text/javascript">
        let app=new Vue({
            el:"#app",
            data:{
                name:"陈超",
                uname: "海",
                phone:['华为','OPPO','苹果'],
                checkPhone: [],
                city:['南京','上海','北京'],
                choose:"",
                age: 18
            },
            watch:{
                age:function(val)
                {
                    console.log(val)
                }
            }
        })
    </script>



</body>
模板语法 
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

    <div id="app">
        <h3> {{msg}}</h3>
        <!-- 一次性插入，不再修改 -->
        <h3 v-once>{{msg}}</h3>
        <h3>{{htmlMsg}}</h3>
        <h3 v-html="htmlMsg"></h3>
    </div>

    <script type="text/javascript">
        let app=new Vue({
            el:"#app",
            data:
            {
                msg: "chenchao",
                htmlMsg:'<span>hello</span>'
                }
        })
    </script>


</body>

插槽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
 
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
<div id="app">
    <!-- <input-com :username="username" @child-input='changeEvent' ></input-com>
    <h3>{{username}}</h3> -->
    <input type="text"  v-model="username"/>
    <h3>{{username}}</h3>
 
 
</div>
 
        <!-- <input type="text" name="" id="username" value="" /> -->
        <!-- <input type="text" @input="username = $event.target.value" name="" id="" value=""/> -->
 
 
 
        <script type="text/javascript">
            Vue.component("input-com",{
                props:['username'],
                // template:`<input type="text" :value="username" @input="$emit( 'child-input' , $event.target.value)"/>`
                template:`<input type="text" :value="username" />`
            })
 
 
 
            // 监听
            // let inputdom=document.querySelector("#username")
            // inputdom.οninput=function()
            // {
            //     document.querySelector("h3").innerHTML=inputdom.value
            // }
 
 
            let app=new Vue({
                el:"#app",
                data:{
                    username:""
 
                },methods:{
                    changeEvent:function(data){
                        this.username=data
                    }
                }
 
 
            })
        </script>
 
    </body>
</html>

插槽解析

    <div id="app">
        <!-- <demo :html='content'></demo> -->

        <demo1><p>helloworld</p></demo1>
    </div>

    <script type="text/javascript">
        // Vue.component("demo",{
        //     props:['html'],
        //     template:`<div class="input-al">
        //     <h1>温馨提示</h1>
        //     <div class="content">
        //         {{html}}
        //     </div>
        // </div>`

        // })
        Vue.component("demo1",{
            template:`<div class="input-al">
            <h1>温馨提示</h1>
            <div class="content">
                <slot></slot>
            </div>
        </div>`

        })
        let app=new Vue({
            el:"#app",
            data:{
                content:"小心熊出没"
            }


        })
    </script>



</body>
过渡动画 
<style type="text/css">
    .context{
        width: 100px;
        height:100px;
        background-color: #00FFFF;
        margin-top: 100px;
        margin-left: 100px;

    }

    /* .fade-enter-active, .fade-leave-active {
      transition: opacity 5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    } */

    .fade-enter-active, .fade-leave-active {
      transition: transform 5s;
    }
    .fade-enter, .fade-leave-to  {
      transform: translateX(250px);
      opacity: 0;
    }
</style>


</head>
<body>

    <div id="app">

        <transition name="fade" enter-active-class="animated bounceOutUp" leave-active-class=" animated fadeOutRightBig" >
            <div class="context" v-if="isShow">
            </div>
        </transition>
        <button type="button" @click="enterEvent">点击</button>
    </div>

</body>
计算属性 
    <div id="app">

        <p>{{fistname+lastname}}</p>
        <p>{{fullname}}</p>
        <!-- 逆序显示字符串 -->
        <p>{{word.split("").reverse().join("")}}</p>
        <p>{{reverseword}}</p>

    </div>


    <script type="text/javascript">
        let app=new Vue({
            el: "#app",
            data:{

                fistname: "张",
                lastname:  "三",
                word: "music"
            },

         // 计算属性
         computed:{
             fullname: function()
             {
                 console.log(this)
                 return this.fistname+this.lastname
             },
             reverseword:function()
             {
            return this.word.split("").reverse().join("")
             }

         }
        })
    </script>


</body>
简化版属性
    实例化样式 
    </head>
<body>


    <div id="app" >

        <div :style="objStyle" ></div>


    </div>

    <script type="text/javascript">
        let app=new Vue({
            el: "#app",
            data:{
                objStyle:{
                    width: "200px",
                    height: "200px",
                    'background-color': "#00FFFF"
                }


            }


        })
    </script>


</body>
    生命周期 
        <div id="app">
        <h1>{{msg}}</h1>
        <h1 :class="className">类名绑定</h1>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                msg: "helloVue",
                className: "redBg"
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this)
                console.log(this.msg)
                console.log(this.clickEvent)
            },
            created() {
                console.log('created')
            },
            beforeMount() {
                console.log('beforeMount')
                let dom = document.querySelector(".redBg")
                console.log(dom)
            },
            mounted() {
                console.log('mounted')
            },
            methods: {

                clickEvent: function() {

                }

            },
            beforeUpdate() {
                console.log('beforeUpdate')
            },
            updated() {
                console.log('updated')
            },
            beforeDestroy() {
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed')
            }
        })


    </script>



</body>
    事件绑定 
    </head>
<body>
    <div id="app">
        <p2>{{count}}</p2>
        <br />
        <button type="button" @click="count+=1">点击</button>
        <button type="button" @click="add">点我</button>
    </div>
    <script type="text/javascript">
        let app=new Vue({
            el:"#app",
            data:{
                count: 0
            },
            methods:{
                add:function(e){
                    console.log(e),
                    console.log(this)
                    this.count++
                }
            }
        })
    </script>

</body>
    事例组件 
        <div id="app">
        <ol>
            <product-com v-for="item,index in product" :pro="item"></product-com>
        </ol>
    </div>
    <script type="text/javascript">
        Vue.component('product-com', {
            props: ['pro'],
            template: `<li >
            <p>姓名：{{pro.name}}</p>
            <p>年龄：{{pro.age}}</p>
            <p>类型：{{pro.location}}</p>
            </li>`,
        })


        let app = new Vue({

            el: "#app",
            data: {
                product: [{
                        name: '詹姆斯',
                        age: 36,
                        location: '小前锋'
                    },
                    {
                        name: '哈登',
                        age: 29,
                        location: '后卫'
                    },
                    {
                        name: '奥尼尔',
                        age: 40,
                        location: '中锋'
                    }
                ]

            }
        })
    </script>

</body>
    修饰符 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
 
        <div id="app">
            <form action="" method="post">
                <input type="text" name="username" id="" v-model="city" value="" />
                <input @click.prevent="tijiao" type="submit" value="提交" />
 
            </form>
            <!-- <button  @click.prevent="tijiao" type="submit" value="提交">提交</button> -->
            <button type="button" @click.ctrl="evet">按住</button>
        </div>
 
        <script type="text/javascript">
            let app = new Vue({
 
                el: "#app",
                data: {
                    city: '芜湖'
                },
                methods: {
                    tijiao: async function() {
                        console.log("提交")
                        console.log(this.city)
                        //let httpUrl =
                            //`${this.city}&key=3c497450d8e44c5280421ceaba1db581`
 
                         let httpUrl=`https://devapi.qweather.com/v7/weather/now?location=${this.city}&key=   
b6b9603891c34dc58f55fc31618dc7e3`
                        let res = await fetch(httpUrl)
                        let result = await res.json()
                        console.log(result)
 
 
                    },
                    evet: function()
                    {
                        console.log('evet')
                    }
                }
 
 
 
            })
        </script>
 
 
    </body>
</html>

    样式

        <style>
        .active{
            width: 200px;
            height: 200px;
            background-color: #00FFFF;
        }


    </style>

</head>
<body>
    <div id="app">
        <div v-bind:class="{active:isShow}"></div>
    </div>


    <script type="text/javascript">

        let app=new Vue({
            el:"#app",
            data:{

                isShow: true

            }


        })



    </script>
</body>
    侦听器 
    </head>
<body>

    <div id="app">

        <h3>{{msg}}</h3>

    </div>
    <script type="text/javascript">
        let app=new Vue({
            el:"#app",
            data:{
                msg: "chenchao"
            },
            watch:{
                msg:(val)=>{
                    console.log("监听事件")
                    console.log(val)
                }
            }
        })
    </script>

</body>
    组件字传父 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <!-- <schoollist v-for="item,index in school" @clocal="chooseeve" :key="'abc'+index" :index="index" :local="item" ></schoollist> -->
                <schoollist v-for="item,index in school" :action="chooseeve" :key="'abc'+index" :index="index" :local="item" ></schoollist>
            </ul>
            <p>选中的地区是:{{chooselocal}}</p>
        </div>
        <script type="text/javascript">
 
            Vue.component("schoollist",{
                props:['local','index','action'],
                template:`<li >
                <p>{{index}} 地点：{{local}}</p>
                <button @click="enterEve(local)">选择</button>
 
                <button @click="$parent.chooseeve(local)">选择</button>
                <button @click="$parent.chooselocal=local">选择</button>
 
                </li>`,
                methods:{
                    enterEve:function(local){
                        console.log(local)
                        //this.$emit('clocal',local)
                        //this.$parent.chooseeve(local)
 
                    }
 
 
                }
 
 
            })
 
 
            let app=new Vue({
                el:"#app",
                data:{
 
                    school:['上海','安徽','浙江'],
                    chooselocal:""
 
                },
                methods:{
                    chooseeve:function(data)
                    {
                        console.log("触发")
                        //this.chooselocal=data
                    }
 
                }
 
 
 
 
            })
 
 
 
        </script>
 
 
 
 
    </body>
</html>

    组件

        <div id="app">
        <hello-com></hello-com>
    </div>
    <script type="text/javascript">
        let hellocom = Vue.component("hello-com", {
            template: '<div><h1>{{chen}}</h1><button @click="event">修改数据</button></div>',
            data: function() {

                return {
                    chen: "hello chen"
                }

            },
            methods: {
                event: function() {
                    this.chen = "你好"
                }
            }



        })

        let app = new Vue({
            el: "#app",
            data: {

            },
            components: {
                'hello-com': hellocom
            },


        })
    </script>

</body>
    todolist 
        <div id="app">
                <div class="main">
                    <div class="header">
                        <div class="logo">记事本</div>
                        <!-- 绑定回车事件,v-model绑定输入框的value值 -->
                        <input type="text" v-model="inputValue" id="input" @keydown.enter="enterEvent" placeholder="请输入待办事项" />
                    </div>
                    <div class="doing todo">
                        <h3><span class="title">正在进行</span><span class="num">{{this.doingList.length}}</span></h3>
                        <div class="list">
                            <transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                                <div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
                                    <input @click.prevent="checkDone(item.id)" :data-id="index" type="checkbox"/>
                                    <div class="content">{{item.content}}</div>
                                    <div class="del" @click="deleteItem(item.id)">删除</div>
                                </div>
                            </transition-group>
                            <!-- <transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                            <div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
                                <input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox">
                                <div class="content">{{item.content}}</div>
                                <div class="del" @click="deleteItem(item.id)">删除</div>
                            </div>
                            </transition-group> -->
                        </div>
                    </div>
                    <div class="done todo">
                        <h3><span class="title">已完成</span><span class="num">{{this.doneList.length}}</span></h3>
                        <div class="list">
                            <transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                                <div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
                                    <input @click.prevent="checkDone(item.id)" :data-id="index" type="checkbox" checked="checked"/>
                                    <div class="content">{{item.content}}</div>
                                    <div class="del" @click="deleteItem(item.id)">删除</div>
                                </div>
                            </transition-group>
                            <!-- <transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                            <div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
                                <input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox" checked="checked">
                                <div class="content">{{item.content}}</div>
                                <div class="del" @click="deleteItem(item.id)">删除</div>
                            </div>
                            </transition-group> -->
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var app =new Vue({
                    el:"#app",
                    data:{
                        todoList:[],
                        inputValue:""
                    },
                    computed:{
                        // 通过过滤todoList数据，得到未做好的列表和已做好的列表
                        doingList:function(){
                            let arr    = this.todoList.filter(function(item,index){
                                return !item.isDone
                            })
                                  return arr;
                        },
                        doneList:function(){
                            let arr    = this.todoList.filter(function(item,index){
                                    return item.isDone
                                })
                                  return arr;
                            }
                    },
                    methods:{
                        enterEvent:function(){
                            // 将数据添加至todoList
                            this.todoList.push({
                                content:this.inputValue,
                                isDone:false,
                                id:this.todoList.length
                            })
                            // 保存
                            this.saveData()
                            //清除输入框的值
                            this.inputValue=""
                        },
                        // 将数据保存到本地存储
                        saveData:function(){
                            localStorage.todoList = JSON.stringify(this.todoList)
                        },
                        checkDone:function(id){
                            // // 每次删除一个
                            // this.todoList.splice(id,1);
                            // this.todoList.forEach((item,i)=>{
                            //     item.id = i;
                            // })
                            this.todoList[id].isDone = !this.todoList[id].isDone;
                            // 每次修改必须保存
                            this.saveData()
                            console.log(id)
                        },
                        deleteItem:function(id){
                            this.todoList.splice(id,1);
                            this.todoList.forEach(function(item,i){
                                item.id = i;
                            })
                            this.saveData()
                        }
                    },
                    mounted:function(){
                        this.todoList =localStorage.todoList? JSON.parse(localStorage.todoList):[];
                    }
                })
            </script>

</body>

    遍历循环

    </head>
<body>

    <div id="app">
        <h1>球星</h1>
        <ul>
            <li v-for="item in stars">
            {{item}}
        </li>
        </ul>
        <h>学生信息</h>
        <ul>
            <li v-for="item,key in student">
                <h4>{{key}}----{{item.name}}</h4>
                <p>年龄： {{item.age}}---学校：{{item.address}}</p>
            </li>
        </ul>
        <p>循环对象</p>
        <ul>
            <li v-for="item in student[0]">
                <h3>{{item}}</h3>
            </li>
            <img :src="student[0].imag" >
        </ul>

        <p>循环对象</p>
        <ol>
            <li v-for="item in student" v-if="item.age%2==1">
                <h4>{{item.name}}</h4>
                <p>年龄： {{item.age}}---学校：{{item.address}}</p>
            </li>

        </ol>

    </div>



    <script type="text/javascript">
        let app=new Vue({
            el: "#app",
            data:{
                stars:["詹姆斯",'杜兰特','戴维斯'],
                student:[{name: "陈超",
                           age:20,
                        address: "安徽省",
                        imag: ",1367070987&fm=26&gp=0.jpg"

                },
                {
                    name:"李四",
                    age:21,
                    address: "芜湖市"
                },
                {
                    name:"张三",
                    age:25,
                    address:"上海市"
                    }
                ]
                }
        })
    </script>

</body>

    动态切换

        <style>
        #pane{
            width: 350px;
            height: 350px;
            background-color: aqua;
        }
    </style>


</head>
<body>
    <div id="app">
        <div v-show="isShow" id="pane">
            HelloWorld
        </div>
        <button @click="isClick">切换显示内容</button>
    </div>


    <script type="text/javascript">
        let app=new Vue({
            el:"#app",
            data: {

                isShow: true,
            },
            methods:{
                isClick: function()
                {
                    app.isShow=!app.isShow
                }
            }
        })
    </script>
</body>
    动态切换升级版 
    </head>
<body>
    <div id="app">
        <div v-show="isShow" id="pane" >
            <h3 v-if="tab==1">首页</h3>
            <h3 v-else-if="tab==2">新闻</h3>
            <h3 v-else>列表</h3>
        </div>
        <button @click="shouye" data-id="1">首页</button>
        <button @click="shouye" data-id='2'>新闻</button>
        <button @click="shouye" data-id='3'>列表</button>
    </div>
    <script type="text/javascript">
        let app=new Vue({
            el: "#app",
            data: {
                isShow: true,
                tab: 1
            },
        methods: {
            shouye:function(e)
            {
                console.log(e)
                let tabid=e.target.dataset.id
                this.tab=tabid
            }
        }

        })
    </script>



</body>
    躺着数星星
    关注
    • 2
      点赞
    • 踩
    • 1
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    Vue插槽slot
    QIU的博客
    07-29 255
    slot插槽   内容分发, 可以将组件使用时，内部写的内容, 分发到 slot 标签 匿名插槽(默认插槽)：没有配置过名字的插槽, 没有具体分配的内容, 都会给到匿名插槽 具名插槽：给插槽起个名字，可以实现定向分发，不是给他的他不要 1. 给插槽起个名字，< slot name="main" ></slot> 2. 再分发内容时，使用 template 标签，包裹需要分发的内容 3. 在 template 标签上 ，通过 v-slot ： 插槽名 指定分发给谁 <di
    vue组件样式
    清欢Viki的博客
    07-09 825
    背景 使用嵌套组件时，样式往往会覆盖，即子组件的样式会覆盖App.vue的样式 比如App.vue的h1标签的颜色是红色，User.vue的h1是绿色，但运行时，都变成了绿色 怎样使组件的样式只作用于本组件那 方法 在style标签中添加scoped Users.vue <template> <div class="users"> <h...
    插槽和组件的自定义事件
    qq_48321086的博客
    09-07 437
    插槽主要是在组件中预留几个位置，后面再来添加需要的内容插槽的用法：单个插槽 多个插槽（多个插槽的使用就需要将slot命名 不然会出错）
    使用vue+elementui实现自定义表单，支持插槽及原生拓展
    weixin_43937400的博客
    03-31 2022
    使用vue+elementui实现自定义表单，支持插槽及原生拓展，表单通常用来当做查询或提交内容
    vue +element ui input框 type=”textarea“时，输入值，enter键触发，会自动添加空格问题（使用trim去掉首尾空格）
    蓝胖子的博客
    10-27 2493
    （使用trim去掉首尾空格） vue +element ui input框 type=”textarea“时，输入值，enter键触发，会自动添加空格问题
    在el-input 里面添加按钮或者其他
    梁小茹的博客
    08-10 6310
    一般在el-input 里面写入按钮没有效果，可以添加：slot=“suffix” 就可以啦 <el-input placeholder="文件名称" > <el-upload slot="suffix" class="upload-demo" > </el-upload> </el-input> ...
    vue中组件的3种使用方式详解
    10-17
    - **编写组件**：首先，你需要在`components`目录下创建一个Vue组件文件，例如`Button.vue`，并定义模板、逻辑和样式。 ```html <!-- Button.vue --> <button class="btn" :style="{color:color}"><slot/> ...
    vue element-ui之怎么封装一个自己的组件的详解
    10-16
    总的来说，封装Vue组件是开发过程中的关键步骤，它有助于创建可维护的代码结构和高效的工作流程。Element UI提供了丰富的基础组件，通过封装和扩展，我们可以构建出符合特定业务需求的组件库，进一步提升开发效率和...
    vue 中的 render 函数作用详解
    11-20
    `$slots` 是 Vue 提供的用于访问插槽内容的对象，`$slots.default` 通常包含了组件的默认插槽内容。在 `render` 函数中，我们可以直接使用 `$slots` 来引用分发的插槽内容。 总的来说，`render` 函数提供了一种强大...
    详解30个常见Vue面试题
    10-09
    7. **Vue组件间的通信** - **props**：父向子传递数据。 - **$emit**：子向父触发事件传递数据。 - **Vuex**：全局状态管理，复杂应用中管理共享状态。 - **Event Bus**：非父子组件间通信的临时事件总线。 8. ...
    详解vue.js移动端导航navigationbar的封装
    10-19
    接着，我们看JavaScript部分，这里定义了Vue组件的选项对象。`props`属性接收三个参数：`title`（默认为空字符串）用于传入标题文本，`bgRed`（默认为`false`）用于控制导航栏背景颜色是否为红色，`fixed`（默认为`...
    项目实训 - Scene-UI - 编写input与textarea
    qq_45785407的博客
    05-03 333
    输入框与文本域 输入框 输入框的整体结构并不复杂，主要分为左中右三部分，左右各一个插槽，用于用户自定义内容，中间由一个原生输入框和一个按钮组组成，还有一个提示文本域属于绝对布局： <template> <div :disabled="disabled"> <!-- 前面的插槽 最大图标大小 22 --> <div v-if="$slots.prefix"> <slot name="prefi
    Vue插槽(slot)详解
    JohnWakeman20的博客
    06-01 392
    插槽是Vue中很重要的一部分，官方文档的这一小节对初学者还是不太友好… 总结一下，插槽可以分为几点： 1.插槽内可以放置的内容 2.默认插槽 3.具名插槽 4.插槽作用域 一.插槽的内容 一句话：插槽内可以是任意内容。 先看一下下面的代码：声明一个child组件， 如果现在我想在这个组件内放置一些内容，结果会是怎样？ <div id="#app"> <child><...
    【vue练习】vue组件自定义样式、vue组件设置不同样式
    weixin_52941842的博客
    05-11 4660
    以自定义组件输入框为例 给输入框动态绑定style变量，变量为一个对象，当然也可以是单个样式，多个样式的时候用变量 <template name="Search"> <div class=""> <div > <input type="text" v-model="searchText" placeholder="请输入" @focus="searchFocus"
    德国Vue.js2终极开发教程（含Vue路由和Vuex）
    03-08
    新手入门现代前端开发的不二选择课程目标：* 学会从简单到复杂企业级应用的VueJS程序编写方法* 能在单页和多页应用中自如使用VueJS* 真正理解VueJS的背后原理，并在真实项目中应用它们授课计划：23章节，21小时，341个视频，11个练习，3个工程实践；新VueJS 2.x版本，课程随版本升级。
    vue三大组件-事件-插槽
    qq_41249913的博客
    09-19 1548
    vue三大组件-事件 对于vue中的组件时间, 主要分为两类 普通事件 修饰符事件 通过@click, @input, @change, @xxx 等事件通过 this,$emit(“xxx”, …)触发 @input.trim, @click.stop, @sumit.prevent等, 一般用于原生html, 自定义组件需要自行开发支持(一般较少遇到) 对于一般的事件来说,...
    给插槽（slot）绑定事件·
    Big_YiFeng的博客
    02-14 6227
    给插槽(slot)绑定事件 背景： 现在有一个组件，它里面有一个插槽，需要实现不管往插槽里面添加什么，都要能让他点击之后可以让组件里面的数据的值+1 实现思路 可以运用 vue 的作用域插槽 先将需要点击之后运行的方法通过作用域插槽传递给调用该组件的页面 <template> <div> <h1>{{ num }}</h1> <slot :add-num="addNum"> <button @click="
    08_组件化-插槽Slot和非父子通信.pptx
    最新发布
    01-25
    4. **非父子通信**：除了通过插槽传递内容，还可以利用Vue提供的全局事件总线（Event Bus）或`provide/inject`方式实现非父子组件之间的数据和行为共享。这在组件层级较多、组件间耦合度较高的场景下特别有用。 ...

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

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

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值