Vue组件传值、Vue、组件
2024-04-16 13:20:42
子组件传父组件:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head><body><div id="app"><!-- 子组件绑定自定义事件（send），触发父组件中接收数据的函数(get()),get()里面参数是固定的$event --><child @send="get($event)"></child></div><script>Vue.component("child", {data() {return {ctext: '你的名字',name: 'zs'}},// 通过某个事件触发$emit(),$emit()第一个参数是一个自定义事件，第二个参数是哟啊发送的数据，可以是单个也可以是[]也可以是{}template: `<div><button @click="$emit('send',name)">发送</button></div>`})const vm = new Vue({el: "#app",data: {pmsg: '父组件的内容',text: null},methods: {// 父组件获取数据的函数get(data) {this.text = dataconsole.log(this.text);}}})</script>
</body></html>
父组件传子组件：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head><body><div id="app"><!-- 属性优先于属性绑定 --><!-- 这里显示的是父组件传过来的属性 --><!-- <hello :pmsg="msg" pmsg="父组件传过来的属性"></hello> --><hello :pmsg="msg" cmsg="父组件传过来的属性" :test="text"></hello></div><script>Vue.component("uname", {props: ["test"],template: `<div>{{test}}</div>`})Vue.component("hello", {// 通过props属性接收父组件传来的值props: ["cmsg", "pmsg", "test"],// :test="test"里面的值"test"是从hello组件里面拿的而不是父组件拿的template: `<div>{{pmsg}}---{{cmsg}}<uname :test="test"></uname></div>`})const vn = new Vue({el: "#app",data: {msg: "我是父组件的msg",text: "你的名字"},methods: {},})</script>
</body></html>
同级组件事件互传：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head><body><div id="app"><to></to><get></get></div><script>// 定义一个事件中心hubconst hub = new Vue()Vue.component("to", {data() {return {toText: '你的名字',getText: ''}},// 发送的事件textmethods: {to() {// 发送方,text是传送的事件hub.$emit('text', this.toText)}},// 接收的事件为testmounted() {// $on是监听hub.$on('test', (data) => {this.getText = dataconsole.log(data);})},// 通过某个事件触发发送数据的函数template: `<div><button @click="to">发送数据</button><br/>传过来的数据是：{{getText}}</div>`,})Vue.component("get", {data() {return {toText: '你叫什么名字',getText: ''}},// 发送的事件testmethods: {// 发送方是hub.$emit()to() {// 发送方,text是传送的事件hub.$emit('test', this.toText)}},// 接收的事件textmounted() {// 接收方是hub.$on()hub.$on("text", (data) => {this.getText = data})},template: `<div><button @click="to">发送数据</button><br/>传过来的数据是：{{getText}}</div>`})const vm = new Vue({el: "#app",})</script>
</body></html>
综合：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head><body><div id="app"><!-- 在没有插槽的时候可以用单标签 --><!-- p-to-c:属性绑定 --><!-- <hello :msg="msg"></hello> --><!-- c-to-p:自定义事件触发父组件中接收数据的函数，父组件接收函数的参数$event是固定不变的 --><!-- c-to-p --><!-- <hello @fn="gettext($event)"></hello> --><tom></tom><jack></jack></div><script>// p-to-c/* Vue.component("hello", {props: ["msg"],template: `<div>{{msg}}</div>`,}) */// c-to-p/* Vue.component("hello", {data() {return {text: "我是子组件的文本信息"}},// 子组件通过某个事件触发$emit()事件，$emit(x,y)里面的第一个参数x为子组件的自定义事件,y为要传给父组件的数据template: `<div><button @click="$emit('fn',text)">发送数据</button></div>`,}) */const hub = new Vue()Vue.component("tom", {data() {return {msg: "早上好"}},methods: {toHi() {hub.$emit("sayHi", this.msg)}},template: `<div><button @click="toHi">发送数据</button></div>`})Vue.component("jack", {data() {return {msg: ""}},mounted() {hub.$on("sayHi", (data) => {this.msg = data})},template: `<div>{{msg}}</div>`})const vm = new Vue({el: "#app ",data: {msg: "我是父组件的文本信息 ",text: ''},// c-to-p/* methods: {// ，接收子组件传送数据过来的函数，函数里的data就是$eventgettext(data) {this.text = dataconsole.log(this.text);}} */})</script>
</body></html>
Vue组件传值、Vue、组件相关推荐
- 六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
- Vue组件传值——兄弟组件传值
兄弟组件传值 兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件 给组件实例(或Vue实例) 声明事件有两种方式: 直接声明 通过$on实现 给组件 ...
- 41. Vue组件传值-父组件向子组件传值
前言 前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
- vue变量传值_vue组件与组件之间传值
目录 一.父组件向子组件传值 二.子组件向父组件传值 三.兄弟组件之间的传值 如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件 一.父组件向子组件传值: html代码: <div i ...
- 使用vuex对兄弟组件传值_vue组件之间相互传值的方式
我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- 使用vuex对兄弟组件传值_Vue 组件之间传值(父子组件传值，vuex传值)
父子组件传值 在父组件中改变子组件里的数据 //父组件点击事件 clickFunc(){//若更新子组件里a的值 this.$refs.son.a = 'xx';//若调用子组件里b方法 this.$ ...
- 父子组件传值--父组件使用v-model，子组件接收问题？
看过官网[组件 v-model | Vue.js]描述,v-model本质上就是语法糖,实现表单元素与数据的双向绑定,譬如: <input v-model="age" typ ...
- 【vue2】组件基础与组件传值(父子组件传值)
- vue方法传值到data_vue组件传值的几种方式
1.bus总线 //定义bus插件 //在util文件夹下定义bus.js import Vue from 'vue'; let install = (vue) => { vue.prototy ...
- vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值 子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
最新文章
- 360浏览器、chrome开发扩展插件教程（2）为html添加行为
- 在服务器搭建深度学习环境随笔
- C语言打印字符串的所有排列组合(附完整源码)
- Java script第二课
- 后缀自动机：从入门到放弃
- ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★...
- 【OS学习笔记】三十九 保护模式十：中断和异常的处理与抢占式多任务对应的汇编代码----动态加载的用户程序/任务一代码
- java 水印 位置_Java实现图片加水印且控制位置和透明度
- 找不到libmmd.dll无法继续执行代码_代码中的软件工程 - xieyupei
- 强悍的 ubuntu —— 窗口界面管理与设置
- Linux查询存储信息,查询存储系统信息 - OceanStor UltraPath for Linux 21.5.0 用户指南 02 - 华为...
- SELECT 基本语法结构
- c++ 结构体和类的区别
- simulink实现模糊PID控制
- pat乙级【数列的片段和 (20分)】测试样例修改（第二个测试点）
- 使用bootstrap写一个注册页面
- jfinal jboot 拦截器过滤文件上传请求 和 跨域解决方法
- 移动硬盘损坏如何恢复数据
- 看我骚操作‘破解’某查查app的sign以及某眼查的Authorization！
- 母版页(布局页)视图
热门文章
- VMware虚拟磁盘管理器用法帮助 用法：vmware-vdiskmanager.exe
- 【通通免费】分享3个超级实用的电脑小工具，一个都不能少哦！
- Android调取拍照和获取拍照后的照片
- 6种抗辐射的经典美食
- 翻转和旋转计算机教学,小学信息技术（上册）第15课图形翻转与旋转教学案例...
- c语言 菜单选择,设计一通过 c语言 个简单实用的菜单,通过菜单选择不同的菜单项并实现相应的功能。...
- shopify上传商品价格怎么改美元美金$
- 纯CSS实现超美选项卡
- Elasticsearch 实现类似SQL语句中like %关键字% 的单纯模糊查询（不进行分词）
- oracle loop面试题,oracle存储过程面试题