vue中父子组件间传值

vue中父子组件间传值

• props / $emit
• $parent / $children
• $ref
  props
  父组件
  ---------在父组件中导入子组件

<Add  msg1="msg1 当传递的数据为字符串时"   :msg2="this.msg2"/>

import Add from './aa.vue'
components:{
      Add
 },
 
data(){
      return{
           msg2:'msg2 child'
     }
},

子组件 add.vue

        <p>{{msg1}}</p>
        <p>{{msg2}}</p>
        
export default {
      props:{
          msg1:{
              type:String,
              default:''
          },
          msg2:{
              type:String,
              default:''
          }
      }  
    }

$emit
父组件

<Add  @showMsg='showMsg'/>
<p>{{msg3}}</p>

data(){
     return{
          msg3:''，	//在data中定义msg3
     }
},

子组件 $emit(‘自定义事件名’，‘参数’ )

<button @click="passMsg">子传父</button>

methods:{
          passMsg(){
            //   通过$emit自定义一个shoMsg事件  $emit('自定义事件名'，'参数' )
              this.$emit('showMsg','通过emit事件实现子传父')
          }
      } 

$parent / $children

mounted(){
	//直接调取子组件数据    获取到的是 数组
    console.log(this.$children[0])
 },

$ref
父组件中

<Add  ref="refchildren"/>

mounted(){
    // ref相当于给子组件命名了，比起children更容易找到对应的子组件
    console.log('ref',this.$refs.refchildren)
},