vue的学习之路(Vue中组件(component )


  • 注意:其中添加div的意义就是让template标签有一个根标签 ,否则只展示“欢迎进入登录程序”

  • 不加div效果图

(2)两种开发方式
  • 第一种开发方式

//局部组件登录模板声明

let login ={ //具体局部组件名称

template:‘

用户登录

};

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{ //用来注册局部组件

login:login //注册局部组件 es6的新特性可以直接写login,也可以的

}

});

//局部组件使用 在Vue实例范围内

  • 第二种开发方式

//1.声明局部组件模板 template 标签 注意:在Vue实例作用范围外声明

用户登录

//2.定义变量用来保存模板配置对象

let login ={ //具体局部组件名称

template:‘#loginTemplate’ //使用自定义template标签选择器即可

};

//3.注册组件

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{ //用来注册局部组件

login:login //注册局部组件

}

});

//4.局部组件使用 在Vue实例范围内

5、Prop的使用

作用:props用来给组件传递相应静态数据或者是动态数据的

(1)通过在组件上声明静态数据传递给组件内部

//1.声明组件模板配置对象

let login = {

template:“

欢迎:{{ userName }} 年龄:{{ age }}

”,

props:[‘userName’,‘age’] //props作用 用来接收使用组件时通过组件标签传递的数据

}

//2.注册组件

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{

login //组件注册

}

});

//3.通过组件完成数据传递

总结:

1.使用组件时可以在组件上定义多个属性以及对应数据

2.在组件内部可以使用props数组生命多个定义在组件上的属性名

3.日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

(2)通过在组件上声明动态数据传递给组件内部

//1.声明组件模板对象

const login = {

template:‘

欢迎: {{ name }} 年龄:{{ age }}

’,

props:[‘name’,‘age’]

}

//2.注册局部组件

const app = new Vue({

el: “#app”,

data: {

username:“小陈陈”,

age:23

},

methods: {},

components:{

login //注册组件

}

});

//3.使用组件

//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

(3) prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 :父级 prop 的更新会向下流动到子组件中,但是反过来则不行。

  • 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 :父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

  • 额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你 应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。—摘自官网

(4)父组件向局部组件传递静态数据
v-model指令

{{msg}}

(5)父组件向局部组件传递动态数据
v-model指令

{{msg}}

在这里插入图片描述

6、组件中定义数据和事件使用

1. 组件中定义属于组件的数据

{{msg}}

2.组件中事件定义

const login={

template:‘

<input type=“button” value=“点我触发组件中事件” @click=“change”>
’,

data(){

return {

name:‘王恒杰’

};

},

methods:{

change(){

alert(this.name)

alert(‘触发事件’);

}

}

}

总结

1.组件中定义事件和直接在Vue中定义事件基本一致

直接在组件内部对应的html代码上加入@事件名=函数名方式即可

2.在组件内部使用methods属性用来定义对应的事件函数即可,

事件函数中this 指向的是当前组件的实例

7、向子组件中传递事件并在子组件中调用该事件(子组件向父组件传递数据)

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

(1)子组件调用父组件,并向父组件传递数据
v-model指令

<button @click=“sup()”>点我触发父组件事件

{{msg}}

<login @sup=“sup”>

(2)子组件向父组件传递对象
v-model指令

<button @click=“sup()”>点我触发父组件事件

{{user}}


{{msg}}


<login @sup=“sup”>

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

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

相关文章

新专利:作物生长期预测方法及装置

近日,国家知识产权局正式授权了一项由北京市农林科学院智能装备技术研究中心、江苏省农业科学院联合申请的发明专利"作物生长期预测方法及装置"(专利号:ZL 2024 1 0185298.1)。该专利由 于景鑫 、任妮、吕志远、李友丽、吴茜等发明人耗时多年潜心研发&#xff0c;犹如…

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求&#xff0c;要求做一款播放器&#xff0c;发现能力上跟EasyPlayer.js基本一致&#xff0c;满足要求&#xff1a; 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏&#xff08;单屏/全屏&#xff09; 多分屏&#xff08;2*2&#xff09; 多分屏…

[数据集][目标检测]抽烟检测数据集VOC+YOLO格式22559张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;22559 标注数量(xml文件个数)&#xff1a;22559 标注数量(txt文件个数)&#xff1a;22559 标…

Oracle数据恢复—Oracle数据库误删除表数据如何恢复数据?

删除Oracle数据库数据一般有以下2种方式&#xff1a;delete、drop或truncate。下面针对这2种删除oracle数据库数据的方式探讨一下oracle数据库数据恢复方法&#xff08;不考虑全库备份和利用归档日志&#xff09;。 1、delete误删除的数据恢复方法。 利用oracle提供的闪回方法…

Golang | Leetcode Golang题解之第397题整数替换

题目&#xff1a; 题解&#xff1a; func integerReplacement(n int) (ans int) {for n ! 1 {switch {case n%2 0:ansn / 2case n%4 1:ans 2n / 2case n 3:ans 2n 1default:ans 2n n/2 1}}return }

最新HTML5中的文件详解

第5章 HTML5中的文件 5.1选择文件 可以创建一个file类型的input,添加multiple属性为true,可以实现多个文件上传。 5.1.1 选择单个文件 1.功能描述 创建file类型input元素&#xff0c;页面中不再有文本框&#xff0c;而是 选择文件 按钮&#xff0c;右侧是上次文件的名称&a…

C语言 ——— 学习并使用 #if defined #ifdef #ifndef 条件编译指令

目录 学习 #if defined #ifdef #ifndef 条件编译指令 使用 #if defined 和 #ifdef 条件编译指令 使用 #ifndef 条件编译指令 学习 #if defined #ifdef #ifndef 条件编译指令 #if #ifndef 条件编译指令是用来判断某个符号是否被定义过&#xff0c;被定义过的话就为真&#x…

【网络安全】-xss跨站脚本攻击实战-xss-labs(1~10)

Level1: 检查页面源代码&#xff1a; function函数&#xff1a; (function(){try{let tn ;if(tn.includes(oem)){Object.defineProperty(document, referrer, {get: function(){return ;}});}else if(tn.includes(hao_pg)){if(!document.referrer.match(tn)){Object.definePro…

centos8构建nginx1.27.1+BoringSSL+http3+lua+openresty

需要接入http3&#xff0c;索性最新的nginx在构建一波&#xff0c;趟一遍坑 准备工作 1.环境命令安装 yum install GeoIP -y yum install GeoIP-devel -y yum install libmaxminddb-devel -y yum install -y patch wget zlib zlib-devel lftp gcc gcc-c make openssl-devel p…

Ton链历险记(一)

系列文章目录 文章目录 系列文章目录前言第一天、FunC环境安装总结 前言 欢迎来到神秘的web3小镇&#xff0c;这里是充满未知和魔法的土地&#xff0c;神兽出没&#xff0c;超能力攻击&#xff0c;卡牌收集。。。 穷困却又励志的无天赋法师木森。因为没有交够保护费&#xff…

一篇文章带你看懂住宅代理如何实现内容过滤

在网络安全中&#xff0c;内容过滤是用户隐私保护的重要组成部分&#xff0c;将不良内容拦截在安全网之外是内容过滤的重中之重。在当下&#xff0c;住宅代理作为异军突起的网络安全工具&#xff0c;在内容过滤上有着不错的表现。本文将深入探讨住宅代理如何实现内容过滤&#…

【d41】【Java】【力扣】21.合并两个有序链表

题目 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [],…

猜测、实现 B 站在看人数

猜测、实现 B 站在看人数 猜测找到接口参数总结 实现 猜测 找到接口 浏览器打开一个 B 站视频&#xff0c;比如 《黑神话&#xff1a;悟空》最终预告 | 8月20日&#xff0c;重走西游_黑神话悟空 (bilibili.com) &#xff0c;打开 F12 开发者工具&#xff0c;经过观察&#xf…

Wni11 下 WSL 安装 CentOS

Wni11 下 WSL 安装 CentOS 方法一、安装包安装下载包安装安装打开 CentOS1. 从 Windows 终端 打开2. 从 PowerShell 打开 方法二、导入 CentOS 的 tar 文件进行安装0. 查看版本&#xff08;可选&#xff09;1. 导出 Docker 容器到 tar 文件2. 将 tar 文件导入 WSL2.1. 导入 tar…

最大间距问题

LeetCode164 最大间距 基数排序 #include <iostream> #include <vector> using namespace std;class Solution { public:int maximumGap(vector<int>& nums) {int nnums.size();if(n<2) return 0;int exp1;int Maxnums[0];vector<int> buf(n)…

基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板

效果图 基于HTMLJSCSSEcharts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。 源码结构 下载地址

tabBar设置底部菜单选项以及iconfont图标,setTabBar设置TabBar和下拉刷新API

tabBartabBar属性:设置底部 tab 的表现 ​ ​ ​ ​ 首先在pages.json页面写一个tabBar对象,里面放入list对象数组,里面至少要有2个、最多5个 tab, 如果只有一个tab的话,H5(浏览器)依然可以显示底部有一个导航栏,如果没有,需要重启后才有,小程序则报错,只有2个以上才可以…

Find My资讯|国外外设品牌发布新型素皮护照套,支持苹果Find My功能

外设品牌 Satechi 发布一款采用苹果Find My技术的新型素皮护照套&#xff0c;售价为 59.99 美元。这款新型护照套除了可以存放护照外&#xff0c;还可存放银行卡、信用卡、身份证、登机牌等物品&#xff0c;其最大特性是采用了与苹果 AirTags 相同的技术&#xff0c;内置了可充…

Chrome 本地调试webrtc 获取IP是xxx.local

浏览器输入 chrome://flags/#enable-webrtc-hide-local-ips-with-mdns并将属性改为disabled修改成功后重启浏览器并刷新网页即可

超详细!!!electron-vite-vue开发桌面应用之创建新窗口以及主进程和子进程的通信监听(十二)

云风网 云风笔记 云风知识库 一、新建打开窗口 1、在electron/main.ts中加入主进程打开窗口逻辑代码 import { ipcMain } from "electron"; ipcMain.handle("open-win", (_, arg) > {const childWindow new BrowserWindow({webPreferences: {preloa…