父子传参基础版

父传子

概念:父传子接--也就是父定义数据,通过属性传给子组件

• 这个abc就是属性名,可以随便取,这个msg就是你在data中定义的数据传给子组件
• 父传

<son :abc="msg"><son/>

• 子接

props:['abc']
<div>{{abc}}</div>

子传父

• 概念:子传父接--子组件通过自定义事件传给父组件
• 子传
• 格式:this.$emit('方法名','参数')

<button @click="tof">点我向父组件传值</button>
data () {
    return {
      smsg: '我是子组件传过来的值'
    }
  },
  methods: {
      // 定义这个方法
    tof () {
      // 格式 this.$emit('方法名',参数)
      this.$emit('abcfn', this.smsg)
    }
  }
}

• 父接
• 接收子组件传过来的自定义方法abcfn

<son @abcfn="receiveSon"/>
  data () {
    return {
      sonPfather: ''
    }
  },
  components: {
    son
  },
  methods: {
    receiveSon (value) {
      console.log(value) //我是子组件传过来的值
      this.sonPfather = value
    }
  }

v-model在组件中传参

• 父组件通过v-model传给子组件

<div>父组件中的v-model:{{modelNum}}</div>
<modelnum v-model="modelNum"></modelnum>

• 子组件接收

• 注意:

  v-model默认给子组件传入一个名为value的参数

  会默认给子组件绑定一个input事件

<template>
  <div>
    v-model父子传参
    <div>{{value}}</div>
	// 点击按钮改变值
    <button @click="changNum">点我改变v-modelNum</button>
  </div>
</template>

<script>
export default {
// 接收父组件传过来
  props: ['value'],
  methods: {
    changNum () {
      this.$emit('input', 100)
    }
  },
}
</script>

<style>
</style>