首页 > 其他分享 >Vue学习笔记50--组件自定义事件

Vue学习笔记50--组件自定义事件

时间：2024-03-13 16:11:06浏览次数：24  
标签：School Vue name 自定义 -- App vue Student

props--将子组件的信息传递给父组件   <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->     <School :getShcoolName="getShcoolName"></School> 示例一： App.vue 

<template>
  <div class="app">
    <!-- <img src="./assets/logo.png"> -->
    <h2>{{msg}}</h2>
    <hr>
    <Student></Student>
    <hr>
<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 --> 
    <School :getShcoolName="getShcoolName"></School>

  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
  name: 'App',
  components: {
    Student,
    School
  },
  data () {
    return {
      msg: 'Vue你好'
    }
  },
  methods: {
    getShcoolName (name) {
      console.log('app收到了学校名称：', name)
    }
  }
}
</script>

<style scoped>
.app {
  background-color: rgb(178, 168, 168);
}
</style>
School.vue 
<!-- 组件的结构 -->
<template>
  <div class="school">
    <h3>学校姓名：{{name}}</h3>
    <h3>学校地址：{{ address }}</h3>
    <button @click="sendSchoolName">把学校名称给app</button>

  </div>
</template>

<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'School',
  props: ['getShcoolName'],
  data () {
    return {
      name: '高新一小',
      address: '西安/高新一小'
    }
  },
  methods: {
    sendSchoolName () {
      this.getShcoolName(this.name)
    }
  }

})
</script>

<!-- 组件的样式 scoped局部样式，否则多个vue组件中同名会导致样式覆盖(将使用最后一个引入的组件样式)-->
<style scoped>
.school {
  background-color: burlywood;
}
</style>
main.js 
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染基本渲染页面(ie8以上版本) -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 开启移动端的理想视口 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 配置页签图标 -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 配置网页标题(package.json文件中name属性) webpack插件完成 -->

  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

</head>

<body>
  <!-- 当浏览器不支持js时，<noscript></noscript>标签中的元素就会被渲染 -->
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>

  <!-- 容器 -->
  <div id="app">

  </div>
</body>

</html>

组件自定义事件

App.vue

<!-- 第一种写法：       使用v-on: 或@       通过父组件给子组件绑定一个自定义事件实现：子给父传递数据     -->     <!-- <Student v-on:defineMyEvent="getStudentName"></Student> -->     <!-- <Student @defineMyEvent="getStudentName"></Student> --> 
<template>
  <div class="app">
    <!-- <img src="./assets/logo.png"> -->
    <h2>{{msg}}</h2>
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <Student v-on:defineMyEvent="getStudentName"></Student>
    <hr>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getShcoolName="getShcoolName"></School>

  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
  name: 'App',
  components: {
    Student,
    School
  },
  data () {
    return {
      msg: 'Vue你好'
    }
  },
  methods: {
    getShcoolName (name) {
      console.log('app收到了学校名称：', name)
    },
    getStudentName (name) {
      console.log('App接收到了学生姓名：', name)
    }
  }
}
</script>

<style scoped>
.app {
  background-color: rgb(178, 168, 168);
}
</style>

Student.vue

<!-- 组件的结构 -->
<template>
  <div class="student">
    <h3>学生姓名：{{name}}</h3>
    <h3>学生性别：{{ age }}</h3>
    <button @click="sendStudentName">把学生姓名给app</button>
  </div>
</template>

<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      msg: '我正在学习 Vue',
      name: '心仪',
      age: 6
    }
  },
  methods: {
    sendStudentName () {
      // 触发Student组件实例身上的自定义事件
      this.$emit('defineMyEvent', this.name)
    }
  }

})
</script>

<!-- 组件的默认样式 css写法 -->
<!-- <style scoped>
.demo {
  background-color: cadetblue;
}
</style> -->

<style lang="less" scoped>
.student {
  background-color: cadetblue;
  .myfontsize {
    font-size: 40px;
  }
}
</style>

注意：事件只执行一次：<Student @defineMyEvent.once="getStudentName"></Student>

示例三：

App.vue

<!-- 第二种写法       通过父组件给子组件绑定一个自定义事件实现--子给父传递数据，使用ref      -->     <Student ref="student" />  // 挂载完毕   mounted () {     this.$refs.student.$on('defineMyEvent', this.getStudentName)   } 建议使用该方法，比较灵活，例如方便实现延迟效果 // 挂载完毕   mounted () {     // this.$refs.student.$on('defineMyEvent', this.getStudentName)     // 延迟执行     setTimeout(() => {       this.$refs.student.$on('defineMyEvent', this.getStudentName)     }, 3000)   } 
<template>
  <div class="app">
    <!-- <img src="./assets/logo.png"> -->
    <h2>{{msg}}</h2>
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <!-- <Student v-on:defineMyEvent="getStudentName"></Student> -->
    <!-- <Student @defineMyEvent="getStudentName"></Student> -->
    <hr>

    <Student ref="student" />

    <hr>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getShcoolName="getShcoolName"></School>

  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
  name: 'App',
  components: {
    Student,
    School
  },
  data () {
    return {
      msg: 'Vue你好'
    }
  },
  methods: {
    getShcoolName (name) {
      console.log('app收到了学校名称：', name)
    },
    getStudentName (name) {
      console.log('App接收到了学生姓名：', name)
    }
  },
  // 挂载完毕
  mounted () {
    this.$refs.student.$on('defineMyEvent', this.getStudentName)
  }
}
</script>

<style scoped>
.app {
  background-color: rgb(178, 168, 168);
}
</style>

注意：如果需要实现事件只触发一次后失效，则可使用$once

 // this.$refs.student.$on('defineMyEvent', this.getStudentName)

    this.$refs.student.$once('defineMyEvent', this.getStudentName)

Student.vue

<!-- 组件的结构 -->
<template>
  <div class="student">
    <h3>学生姓名：{{name}}</h3>
    <h3>学生性别：{{ age }}</h3>
    <button @click="sendStudentName">把学生姓名给app</button>
  </div>
</template>

<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      msg: '我正在学习 Vue',
      name: '心仪',
      age: 6
    }
  },
  methods: {
    sendStudentName () {
      // 触发Student组件实例身上的自定义事件
      this.$emit('defineMyEvent', this.name)
    }
  }

})
</script>

<!-- 组件的默认样式 css写法 -->
<!-- <style scoped>
.demo {
  background-color: cadetblue;
}
</style> -->

<style lang="less" scoped>
.student {
  background-color: cadetblue;
  .myfontsize {
    font-size: 40px;
  }
}
</style>

　　

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　

 

标签：School,Vue,name,自定义,--,App,vue,Student
From： https://www.cnblogs.com/YYkun/p/18070662

相关文章

  • 练习4-11 统计素数并求和
    探索--题目集索引本题要求统计给定整数M和N区间内素数的个数并对它们求和。输入格式:输入在一行中给出两个正整数M和N（1≤M≤N≤500）。输出格式:在一行中顺序输出M和N区间内素数的个数以及它们的和，数字间以空格分隔。输入样例:1031输出样例:7143实现代码：#includ......
  • C# Onnx C2PNet 图像去雾 室外场景
    目录介绍效果模型信息项目代码下载C#OnnxC2PNet图像去雾室外场景介绍github地址：https://github.com/YuZheng9/C2PNet[CVPR2023]CurricularContrastiveRegularizationforPhysics-awareSingleImageDehazing效果模型信息ModelProperties-----------......
  • 练习4-7 求e的近似值
    探索--题目集索引自然常数 e 可以用级数 1+1/1!+1/2!+⋯+1/n!+⋯ 来近似计算。本题要求对给定的非负整数 n，求该级数的前 n+1 项和。输入格式:输入第一行中给出非负整数 n（≤1000）。输出格式:在一行中输出部分和的值，保留小数点后八位。输入样例:10输出样例:2.......
  • docker-compose安装minio集群
    一、docker-compose安装minio单机版直接使用docker安装单机版，可用于测试创建.env环境文件MINIO_PASSWORD=minio@123创建docker-compose.yml环境文件version:"3"services:minio:image:minio/miniocontainer_name:minioports:-9000:9000......
  • 4.首页轮播图
    轮播图轮播图组件https://uniapp.dcloud.net.cn/component/swiper.htmluni-app的内置组件setup()是vue3新增加的组件。vue3采用了组合式API，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。(简单点来说，就是vue2里面的data，method，computed···全不要啦......
  • 面试官：Spring Boot 实现全局异常处理应该怎么实现
    该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点面试官：SpringBoot实现全局异常处理应该怎么实现在SpringBoot中实现全局异常处理可以帮助我们统一处理应用程序中的异常，提高代码的可维护性和可读性。通常情况......
  • 罐头鱼AI视频矩阵系统介绍|视频矩阵获客
    智能化管理，轻松批量剪辑短视频！AI系统助力您的视频营销提效！    随着短视频营销的兴起，我们推出了一款AI批量剪辑短视频系统，让视频制作更加智能高效。以下是系统的主要功能特点：首页显示：清晰展示账号登录状态、可绑定账号数量、已绑定账号情况和最近上传的视频素材，让您......
  • 3.安装uview组件
    官网地址https://vkuviewdoc.fsq.pub/https://vkuviewdoc.fsq.pub/components/install.htmluViewVue3.0横空出世，继承uView1.0意志，再战江湖，风云再起！同时支持Vue3.0和Vue2.0，你没看错，现在uView支持Vue3.0了！（不支持nvue，此版本为uView1.0的分支）插件市场https://ext......
  • i茅台预约 免费自动预约
    i茅台APP永久自动预约终端茅台批量自动预约后台解放你的双手，避免错过时间忘记，每天自动帮预约申购主要功能：①平台注册账号(可用i茅台)②添加多个用户自动预约③自动预约④类型选择(本市出货量最大的门店，或位置附近门店)⑤自动旅行，首次旅行分享⑦获取申购耐力值⑧自定......
  • Android View 绘制原理
    在Android中，视图绘制原理是指系统如何创建、管理和更新用户界面上显示的各种视图（Views）的过程。以下是Android视图绘制的基本原理概述：1.**视图层次结构**:  -AndroidUI是由一系列嵌套的视图构成的层次结构，顶层通常是`DecorView`，它包裹着`ContentView`（即Activity的根视图......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99