VUE组件自定义事件和v-model基础

最新推荐文章于 2022-09-22 17:10:56 发布

qq_14897069

最新推荐文章于 2022-09-22 17:10:56 发布

阅读量626

点赞数

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.csdn.net/qq_14897069/article/details/87994493

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自定义事件绑定使用$emit回调事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名规范</title>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id="App">
    <button-counter v-on:even-text="mybutton" :title="props[0].title"></button-counter>
</div>
</body>
<script>

    //传入字符串
    Vue.component("button-counter",
        {
            props:["title"],
            template:`
                <button style="color: red" @click="$emit('even-text')">{{title}}</button>
            `
        })

    new Vue({
        el:"#App"
        ,data:function () {
            return{
                props:[
                    {
                        id:1,
                        title:"你的烂借口"
                    },
                    {
                        id:2,
                        title:"蜡笔没了小新"
                    }
                ],
                count:1
            }
        },
        methods:{
            mybutton:function () {
                console.log("自定义动态事件绑定")
            }
        }
    })
</script>
</html>

组件数据双向绑定：v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名规范</title>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id="App">
    <h2>{{checked}}</h2>
    <base-checkbox v-model="checked"></base-checkbox>

</div>
</body>
<script>

    Vue.component('base-checkbox', {
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
    })

    var app = new Vue({
        el: "#App"
        , data: function () {
            return {
                props: [
                    {
                        id: 1,
                        title: "你的烂借口"
                    },
                    {
                        id: 2,
                        title: "蜡笔没了小新"
                    },
                ],
                count: 1,
                checked: true
            }
        },
        methods: {
            mybutton: function () {
                console.log("自定义动态事件绑定")
            }
        }
    })
</script>
</html>

qq_14897069

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE组件自定义事件和v-model基础

自定义事件绑定使用$emit回调事件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;组件命名规范&lt;/title&gt; &lt;script src="https://
复制链接

扫一扫