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


本文摘自PHP中文网,作者青灯夜游,侵删。

下面Vue.js教程栏目给大家介绍一下vue2.0中子组件通过v-modal改变父组件中值的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

父组件代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<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>

  子组件代码:

1

2

3

4

5

6

7

8

9

10

<template lang="pug">

  p this is child

</template>

<script>

  export default{

      created(){

          this.$emit("input",[4,5,6])

      }

  }

</script>

  效果如下:

阅读剩余部分

相关阅读 >>

vue路由守卫有哪三种类型

怎么用npm安装vue

vue哪一年出来的

vue前端ui框架有哪些?

4个很 nice 的vue router过渡动效,快来收藏!

vue架构是什么

vue中怎么定义自定义组件

vue3.0和vue2.0的区别是什么?

vue组件中如何引入css文件

vue.use是什么呀?

更多相关阅读请进入《vue》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...