vue3 父子组件传参

父向子传参：

父组件：

<myAudio ref="myAudioOne" :myAudioUrl="musicSrc" @event1="changePlay"
  id="audioId"  v-if="musicSrc!=''"></myAudio>

import myAudio from './components/myAudio.vue'

    const myAudioOne=ref(null)

 state.musicSrc =  state.dataItem[0][0].resource

v-if的意思等待接参，在参数没有传入时不让它显示保证musicSrc不会传过去是空

子组件：

  props: ['myAudioUrl'],

  setup(props, context) {

    const state = reactive({

myAudioUrl:'',

})

  state.myAudioUrl = props.myAudioUrl
}

子组件接入参数props.myAudioUrl 挂载到页面上就OK了

子向父传：

    
 setup(props, context) {
const  go=()=>{


context.emit('event1', false)
}
}

用这个方法 emit 第一个从参数是方法名对应父组件里的@event1 第二个参数是你所需要的传的数值，对象，数组

父组件：

 <myAudio ref="myAudioOne" @event1="changePlay"  id="audioId"  ></myAudio>

@event1="changePlay" 用这个方法接

    const changePlay=(val) =>{
      state.isActive = !val
}

接住就OK了

父，子组件互调方法

父调子，

    <child   :value="value" ref="child" 
:options2='options2' @resetFields="resetFields"></child>

首先在引入的child写一个ref（例如此处是‘child’）

this.$refs.child.init(); 用ref的方法可以调起child的方法，

同时也可以使用父传子值然后利用子组件的watch方法（根据传值不同调起不同方法），此方法比较简单不粘代码了

子调父，

可以使用ref

this.$parent.init() 此处的$parent就是指向父组件 init就是父组件的方法

也可以使用$emit向父组件传值，当传入某个特定值时让父组件调起某个方法，使用此方法可看上方子如何向父传值，在父组件接收值的方法里写if判断即可

vue3 父子组件传参

猜你喜欢