父组件向子组件动态传参的两种方式

一：通过ref父组件向子组件传参

父组件：

<template>
  <div id="app">
    <refTest ref="refTest"/>
    <button @click="show">点我传递</button>
  </div>
</template>

<script>
import refTest from './components/refTest.vue'

export default {
  name: 'App',
  data(){
    return{
      params:'传参'
    }
  },
  components: {
    refTest
  },
  methods:{
    show(){
      this.$refs.refTest.show(this.params)
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="trans">
        点我
    </button>
    <p>{{param}}</p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            param:''
        }
    },
    methods:{
        show(e){
            alert(e);
            this.param=e
        },
        trans(){
            console.log(this.param);
        }
        
    }
}
</script>

二：通过props传参并用watch监视