• 技术文章 >web前端 >Vue.js

    vue2.0子组件中怎么改变父组件中的值 ?

    青灯夜游青灯夜游2020-11-05 17:50:00转载434
    下面Vue.js教程栏目给大家介绍一下vue2.0中子组件通过v-modal改变父组件中值的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    vue2.0中子组件通过v-modal改变父组件中的值

    父组件代码:

    <template lang="pug">
      p
        p this is father
        child(v-model="data")
    </template>
    <script>
      import child from "./childrenS.vue";
      export default{
        data(){
          return {
            data: [1, 2, 3]
          }
        },
        components: {
          child
        },
        watch: {
          data(n, o){
            console.log(n,o)
          }
        }
      }
    </script>

      子组件代码:

    <template lang="pug">
      p this is child
    </template>
    <script>
      export default{
          created(){
              this.$emit("input",[4,5,6])
          }
      }
    </script>

      效果如下:

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    更多编程相关知识,请访问:编程学习网站!!

    以上就是vue2.0子组件中怎么改变父组件中的值 ?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue
    上一篇:vue+webpack2实现路由懒加载的方法介绍 下一篇:详解vue验证器(vue-validator)的使用
    大前端线上培训班

    相关文章推荐

    • 浅谈vue-cli初始化Vue项目的项目结构• 分析一下Vue.use的源码• vue如何实现局部刷新?(代码示例)• 详解vue中的数据初始化(initState)• vue.js中如何使用v-for以及怎么获取索引?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网