VUE父子组件的传参问题

1.父组件向子组件传参

1）这是一个父组件

//这是一个父组件 
<div>
<port :port-List="portList" ></port>
</div>
//port  这是子组件的名称

export default{
    components: {
      
    },
   
    props: {
      
    },
    data() {
      return{
        portList:'',
      }
    },
    computed: {
    },
    mounted() {
      
    },
    watch: {
     
    },
    methods:{
      queryPort(){
    this.portList='1';
}

  }

2.这是一个子组件

//这是一个子组件 
<div>

</div>


export default{
    components: {
      
    },
   
    props: ['portList'],
    data() {
      return{

      }
    },
    computed: {
    },
    mounted() {
       console.log("3",this.portList)//在子组件知道父组件值得方法就是this.
    },
    watch: {//这里可以监听父组件值的变化，一旦变化就会去执行this.queryPort方法把变化的值打印
     portList(val){
    this.queryPort(val)
}
    },
    methods:{
       queryPort(value){
        console.log("3",value)
}
       

  }

2.子组件向父组件传参

1.父组件

//这是一个父组件 
<div>
<port :port-List="portList" @hand-association="association"></port>
</div>
//port  这是子组件的名称

export default{
    components: {
      
    },
   
    props: {
      
    },
    data() {
      return{
        portList:'',
      }
    },
    computed: {
    },
    mounted() {
      
    },
    watch: {
     
    },
    methods:{
      queryPort(){
    this.portList='1';
}

association(row){
   console.log("1",row) 
}

  }

2.子组件

//这是一个子组件 
<div @click="handAssociation>

</div>


export default{
    components: {
      
    },
   
    props: ['portList'],
    data() {
      return{

      }
    },
    computed: {
    },
    mounted() {
       console.log("3",this.portList)//在子组件知道父组件值的方法就是this.
    },
    watch: {//这里可以监听父组件值的变化，一旦变化就会去执行this.queryPort方法把变化的值打印
     portList(val){
    this.queryPort(val)
}
    },
    methods:{
       queryPort(value){
        console.log("3",value)；
        
}

handAssociation(){
        this.$emit("hand-association",selectRow);
      },
       

  }