vue关于父子组件之间的传值

1.新建一个子组件，在父组件中引入并使用，传入initNum为10给子组件

父组件中
引入：   import clickCounter from ''
注册：   components: {clickCounter}
使用：   
             使用solt插槽时写在这          
         

2.子组件接收值

接收值
props: {// 父组件传过来的值的集合（父传子）
    initNum: { // initNum为字段名
      type: Number,// 字段类型
      default: 0
    }
  }

放在data中使用
 data () {
    return {
      num: this.initNum
    }
  },

子传父

1.子传父用$emit

  this.$emit('clicknum', {// 父组件可以监听到这个方法(子传父)
        num: this.num //传入的值
      })

2.父监听接收

监听子组件传值的方法@clicknum

     




 methods: {
    handleClicknum (data) {
      console.log(data.num)
    }
  }

全部代码

index父组件：

2.子组件click-counter.vue

插槽：另外slot插槽是在子组件中插入的位置中写slot标签，然后在父组件的子组件里面插入界面