zoukankan      html  css  js  c++  java
  • vue中的this.$emit(‘input‘,this.val);是什么意思?

    子组件在传值的时候,选用input,如this.$emit(‘input’,val),在父组件直接用v-model绑定,就可以获取到了

    而子组件也可以通过$emit(‘input’,false),去改变父组件中v-model 和 子组件中 value 的值 。
    例子:

    子组件

    <template>
    <div>
    <div class="group">
    <label>{{title}}</label>
    <input type="text" placeholder="请输入" @input="changeData()" v-model="val">
    </div>
    </div>
    </template>

    <template>
    <div>
    <div class="group">
    <label>{{title}}</label>
    <input type="text" placeholder="请输入" @input="$emit('input', $event.target.value)" v-model="val">
    </div>
    </div>
    </template>

    <script>
    export default {
    props:["title"],
    data () {
    return {
    val:""
    }
    },
    methods:{
    changeData:function(){
    console.log(111);
    this.$emit('input',this.val);
    }
    }
    }
    </script>
    父组件:

    <cmsGroup title="用户名" v-model="username"></cmsGroup>
    其中,子组件this.$emit(‘input’,this.val); v-model 绑定的是 input 事件

    vue 再父子组件传值时,除了传统的父组件 :属性去传值外,还可以使用 父组件v-model传值,子组件props[‘value’]接收,

    <!--父组件-->

    <template>
    <test v-model = "isShow"></test>
    <button @click="isShow = !isShow">switch</button>
    </template>
    <script>
    import test from '../test';
    export default {
    components: {
    test
    },
    data() {
    return {
    isShow: false
    }
    }
    }
    </script>

    <!--子组件-->

    <template>
    <div>
    <div>{{value}}</div>
    <Button @click="$emit('input',false)">关闭</Button>
    </div>
    </template>
    <script type="text/ecmascript-6">
    export default {
    props:['value'],
    mounted() {
    console.log(this.value)
    }
    }
    </script>
    ————————————————
    版权声明:本文为CSDN博主「红孩儿2011」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_26642611/article/details/104055048

  • 相关阅读:
    HTML大文件上传(博客迁移)
    微信小程序初探
    基于NodeJS微信公众号
    基于NodeJS的秘室聊天室
    CSS3 值得称赞新特性
    CAS FOR WINDOW ACTIVE DIRECTORY SSO单点登录
    IOS学习之-私人通讯录
    android 模拟2048
    使用ctypes在Python中调用C++动态库
    [Leetcode] Longest Palindromic Subsequence
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/14657193.html
Copyright © 2011-2022 走看看