VUE组件之间的传值和调用

一、父组件调用子组件的方法

$refs:父组件 调用 子组件的 方法 或者 属性,由父级来主导调用这里我们可以使用规则的数据结构来存储和转发。通过this.$refs.子组件名.方法(属性名)来操控子组件中的方法或者属性,如下图

父组件:
<template>
  <div>
   <uuu ref='test_hanshu'></uuu>   //ref 给子组件命名一个名字
   <p @click="clickme">点击我</p>
  </div>
</template>
<script>
import uuu from "../17/17-2copy"
export default {
  data() {
    return {
      visible: false,
    };
  },
  components: {
      uuu
    },
 
  methods: {
    clickme(){
       const a="我是超人";
      this.$refs.test_hanshu.lucax(a)   //调用子组件里面的方法
    }
    
    }
};
</script>

访问子组件实例或子元素

this.$refs.test_hanshu.值=123
子组件:
<template>
  <div>
   我是17-2
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
   lucax(uir){
     console.log(uir)
   }
    }
};
</script>

二、子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件:
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
子组件:
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

父组件:
<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
子组件:
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

父组件:
<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
子组件:
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

三、父组件向子组件传递数据

1、父组件中动态绑定数据到子组件

父组件向子组件传递数据,首先要在父组件中使用v-bind命令将要传递的数据绑定到子组件上。比如我们要从父组件中给子组件传递两条数据,示例代码如下:

<template>
  <div id="app">
    <!-- 使用v-bind命令将父组件中的数据绑定到子组件上 -->
    <Child v-bind:val_1="value_1" v-bind:val_2="value_2"></Child>
  </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
  name: 'App',
  components: {
    Child
  },
  data: function () {
    return {
      value_1: '父组件中的数据1',
      value_2: '父组件中的数据2'
    }
  }
}
</script>

<style>
</style>

2、子组件中接收传递过来的数据

父组件中完成数据绑定之后,在子组件中的props属性接收一下父组件传递过来的数据,要接收多少数据,就在pros属性中写多少数据。比如要接收两条数据,示例代码如下:

<template>
  <div class="Child">
    <h1>{{ val_1 }}</h1>
    <h1>{{ val_2 }}</h1>
  </div>
</template>
<script>
export default {
  name: 'Child',
  // 在props属性里接收父组件传递过来的数据
  props: ["val_1", "val_2"]
  // 接受父组件的另外一种写法
  // props: {
  //   users: {
  //     type: Array,
  //     required: true
  //   }
  // }
}
</script>

<!-- Add “scoped” attribute to limit CSS to this component only -->
<style scoped></style>

四、子组件向父组件传递数据

1.通过父组件给子组件传递函数类型的props实现:子给父传递数据

父组件:
<SchoolCm :getSchoolName="getSchoolName"></SchoolCm>

methods: {
     getSchoolName(name) {

        console.log('App收到了学校名:', name)

    }

}
子组件:
<button @click="sendSchoolName">把学校名给App</button>
 props: ['getSchoolName'],
methods: {

      sendSchoolName() {

        this.getSchoolName(this.name)

      }

}

2.通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on)

父组件:
 <StudentCm name="张三" :age="18" v-on:wxj="getStudentName"></StudentCm>
methods: {
    getStudentName() {
        console.log('demo被调用了')
     }
}
子组件:
<button @click="sendStudentName">把学生名给App</button>
methods: {
    sendStudentName() {
        // 触发Student组件实例身上的wxj事件
        this.$emit('wxj')
    }
}

3.通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) 说明:这种方式虽然麻烦,但是更灵活,可以使用setTimeout控制响应时间。

父组件:
<StudentCm name="李四" ref="student"></StudentCm>
 mounted(){
      setTimeout(() =>{
        // 函数体
        this.$refs.student.$on('wxj', this.getStudentName)

      }, 3000)
},
methods: {
    getStudentName(name) {
        console.log('App收到了学生名:', name)
     }
}
子组件:
<button @click="sendStudentName">把学生名给App</button>
methods: {
sendStudentName() {
        // 触发Student组件实例身上的wxj事件
        this.$emit('wxj')
    }
}

凯宾斯基笔记:
https://www.cnblogs.com/kaibindirver/p/13369784.html

posted @   夜久听山雨  阅读(356)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示