vue中v-bind指令修饰符 .sync的使用

72 阅读 0 评论 48 点赞

我是靠谱客的博主从容眼睛，最近开发中收集的这篇文章主要介绍vue中v-bind指令修饰符 .sync的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

.sync 使用场景：父组件传递数据给子组件同时子组件想要修改父组件的数据

v-bind指令修饰符：
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

        1 在父组件的子组件标签上边添加数据
        <子组件标签 :数据名.sync="值"></子组件标签>
        2 子组件中添加props接收这个值
        props: {
            数据名: {

            }
        }
        3 给需要改变这个数据的元素绑定事件 并且触发自定义事件update:数据名
        <元素 @click="事件">
        methods: {
            事件() {
                this.$emit('update:数据名',新的数据)
            }
        }

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <child :nums="num" @send-data="getData"></child> -->
        <child :nums.sync="num" :msg.sync="msg"></child>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component('child', {
            props: {
                nums: {
                    type: Number
                },
                msg: {
                    type: String
                }
            },
            template: `
                <div class="child">
                    子组件--{{nums}}--{{msg}}
                    <button @click="change">修改数据</button>    
                </div>
            `,
            methods: {
                change() {
                    this.$emit('update:nums',8500)
                    this.$emit('update:msg','world')
                }
            }
        })
        var app=new Vue({
            el: "#app",
            data: {
                num: 100,
                msg: 'hello'
            },
            // methods: {
            //     getData(data) {
            //         this.num=data
            //     }
            // }
        })
    </script>
</body>
</html>