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中key的作用示例

单独引入vue.js文件怎么写组件

如何解决vue 引入字体css报错问题

vue文件怎么打开

vue和react本质的区别是什么

vue脚手架搭建流程

.vue 是什么

vue怎么引用css

vue 轻量级图表组件

vue 的 render 方法中 h 是什么?

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




打赏

取消

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

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

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

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

评论

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