vue简单使用五(组件的使用)

目录

     如何定义组件:

     组件的命名:

     父组件向子组件传值:

     子组件向父组件传值:


 

如何定义组件:

      全局组件定义:

     局部组件定义:

组件的基本使用:

打印结果:

组件的命名:

父组件向子组件传值:

打印结果:

子组件向父组件传值:

打印结果:点击点击一次加五按钮即可显示

 完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="js/vue.js"></script><title>Title</title><style></style>
</head>
<body><div class="vuePro"><div-eml :info="info"></div-eml><!-- 驼峰命名的组件,使用标签还得用横杠隔开 --><com-name @md="md($event)"></com-name><div>{{num}}</div><div>{{name}}</div></div></body><script>Vue.component("comName",{template: `<div><button @click="$emit('md',{name:'张三',count:5})">点击一次加五</button></div>`});Vue.component("div-eml",{props:['info'],data(){return{msg:"组件变量"}},template:`<div><div>{{msg}}</div><div>{{info}}</div></div>`});new Vue({el:".vuePro",data:{info:"父组件中内容信息",num:0,name:''},methods:{md(val){this.num+=val.count;this.name=val.name;}},components:{"button-eml":{}}});
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813033.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯真题有奖问答

小蓝正在参与—个现场问答的节目。活动中一共有30道题目,每题只有答对和答错两种情况,每答对—题得10分&#xff0c;答错—题分数归零。小蓝可以在任意时刻结束答题并获得目前分数对应的奖项&#xff0c;之后不能再答任何题目。最高奖项需要100分,所以到达100分时小蓝会直接停止…

分类预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络数据分类预测

分类预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络数据分类预测 目录 分类预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现OOA-BP鱼鹰算法优化BP神经网络多特征分类预测&#xff08;完整源码和数…

MATLAB Simulink仿真搭建及代码生成技术—01自定义新建模型模板

MATLAB Simulink仿真搭建及代码生成技术 目录 01-自定义新建模型模板点击运行&#xff1a;显示效果&#xff1a;查看模型设置&#xff1a; 01-自定义新建模型模板 新建模型代码如下&#xff1a; function new_model(modelname) %建立一个名为SmartAss的新的模型并打开 open_…

【微服务】------常见模型的分析与比较

DDD 分层架构 整洁架构 整洁架构又名“洋葱架构”。为什么叫它洋葱架构&#xff1f;看看下面这张图你就明白了。整洁架构的层就像洋葱片一样&#xff0c;它体现了分层的设计思想。 整洁架构最主要的原则是依赖原则&#xff0c;它定义了各层的依赖关系&#xff0c;越往里依赖越…

[大模型]Langchain-Chatchat安装和使用

项目地址&#xff1a; https://github.com/chatchat-space/Langchain-Chatchat 快速上手 1. 环境配置 首先&#xff0c;确保你的机器安装了 Python 3.8 - 3.11 (我们强烈推荐使用 Python3.11)。 $ python --version Python 3.11.7接着&#xff0c;创建一个虚拟环境&#xff…

Web前端-Ajax

Ajax 概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。 作用: 1.数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。 2.异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等…

Ubuntu 22上安装Anaconda3。下载、安装、验证详细教程

在Ubuntu 22上安装Anaconda3&#xff0c;你可以遵循以下步骤&#xff1a; 更新系统存储库&#xff1a; 打开终端并运行以下命令来更新系统存储库&#xff1a; sudo apt update安装curl包&#xff1a; 下载Anaconda安装脚本通常需要使用curl工具。如果系统中没有安装curl&#x…

基于springboot的医院挂号取药缴费管理系统

一、基于springboot的医院挂号取药缴费管理系统 简介系统和功能 二、技术框架 这是一款基于SpringbootLAYUIMysql的管理系统 开发语言&#xff1a;Java JDK1.8 数据库&#xff1a;mysql5.7 前端&#xff1a;LAYUI框架 后端&#xff1a;Springboot框架、Spring框架、持久层My…

Scala详解(3)

Scala 函数 柯里化(Currying) 柯里化指的是将多个参数的函数变成接收单一参数的过程 案例 package com.fesco.method ​ object MethodDemo1 { ​def main(args: Array[String]): Unit { ​// 定义一个函数&#xff1a;获取两个数字中较大的那个数字// 基本函数/*def max(a…

WinForms零基础进阶控件教程(超实用详细版)

文章目录 树型控件TreeView常用属性常用事件添加、删除树节点通过代码添加树节点通过代码删除树节点&#xff1a;管理节点图标响应事件&#xff0c;获取选中节点 列表视图ListView常用属性常用事件添加、删除项使用ListViewItem集合编辑器添加&#xff0c;删除项&#xff1a;通…

神州数码2024春招Java笔试(原题)

一、单选题&#xff08;35题&#xff0c;每题2分&#xff09; 1、(2分)【单选题】以下用于修改数据库字段名称的SQL语句是&#xff08;&#xff09; A.RENAME B.CHANGE C.ALTER D.MODIFY 2、(2分)【单选题】若一棵二叉树的前序遍历为a,e, b, d. c&#xff0c;后序遍历为 b, …

LED显示IC-点阵数码管显示驱动/抗干扰数码管驱动VK1650 SOP16/DIP16

产品品牌&#xff1a;永嘉微电/VINKA 产品型号&#xff1a;VK1650 封装形式&#xff1a;SOP16/DIP16 概述 VK1650是一种带键盘扫描电路接口的 LED 驱动控制专用芯片&#xff0c;内部集成有数据锁存器、LED 驱动、键盘扫描等电路。SEG脚接LED阳极&#xff0c;GRID脚接LED阴极&…

WebGL 2.0相较于1.0有什么不同?

作者&#xff1a;STANCH 1.概述 WebGL 1.0自推出以来&#xff0c;已成为广泛支持的Web标准&#xff0c;既能跨平台&#xff0c;还免版税。它通过插件为Web浏览器带来高质量的3D图形&#xff0c;这是迄今为止市场上使用最广泛的Web图形&#xff0c;并得到Apple&#xff0c;Goog…

ControllerAdvice用法

ControllerAdvice用法 ControllerAdvice是一个组件注解&#xff0c;它允许你在一个地方处理整个应用程序控制器的异常、绑定数据和预处理请求。这意味着你不需要在每个控制器中重复相同的异常处理代码&#xff0c;从而使得代码更加简洁、易于管理。 主要特性 全局异常处理&a…

【vue】v-model.lazy等(非实时渲染)

v-model&#xff1a;实时渲染v-model.lazy&#xff1a;失去焦点/按回车后&#xff0c;才渲染v-model.number&#xff1a;值转换为数字v-model.trim&#xff1a;去除首尾空格 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&qu…

MDK平台 - Code, RO-data , RW-data, ZI-data详解

文章目录 1 . 前言2 . Code, RO-data , RW-data, ZI-data解析3 . RAM上电复位4 . 细节扩展5 . 总结 【全文大纲】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 前言 MDK编译后&#xff0c;会列出Code, RO-data , RW-data, ZI-data&#xff0c;以下解析…

股票价格预测 | Python使用LSTM预测股票价格

文章目录 效果一览文章概述代码设计效果一览 文章概述 Python使用LSTM预测股票价格 代码设计 import pandas as pd import matplotlib.pyplot as plt import numpy as np import tensorflowfrom numpy import

我可以信任XEX吗?

在数字货币领域&#xff0c;安全一直是我们最为关注的话题之一。作为一个积极参与加密货币交易的投资者&#xff0c;我深知选择一个安全可靠的交易所至关重要。在众多交易所中&#xff0c;我发现XEX是最安全的交易所之一。 每当我想要进行加密货币交易时&#xff0c;第一件事就…

git合并冲突

git合并冲突 问题描述 Auto-merging mes5server/mes5j.json Auto-merging mes5server/mes5j.json CONFLICT (content): Merge conflict in mes5server/mes5j.json Automatic merge failed; fix conflicts and then commit the result.原因 要合并的两个分支改动了同一份文件…

深入理解MySQL中的log_bin_trust_function_creators系统变量

在MySQL数据库管理中&#xff0c;尤其是在涉及到数据复制与恢复的情境下&#xff0c;二进制日志&#xff08;Binary Log&#xff09;扮演着至关重要的角色。它忠实记录了对数据库内容进行修改的SQL语句&#xff0c;为数据同步、故障恢复等任务提供了关键信息。然而&#xff0c;…