vue父子组件之间传值
vue父子组件进行传值
vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件。
父组件向子组件传值
下面用的script引入的方式,那种vue-cli搭建的同理
父组件通过 v-bind:属性名(自定义的) = "要传递的数据"
子组件通过 props:["属性名"] 这个属性名就是父组件传递过来的数据信息
<div id="app">
<mod :abc="name" :d="title"></mod>
</div> /*
父组件向子组件发送消息
*/
Vue.component('mod',{
template:'<div>{{abc}} {{d}}</div>',
props:['abc','d'],
data:function () {
return { }
}
}); // 父组件向子组件传递数据 new Vue({
el:"#app",
data:{
name:'123',
title:'456'
}
});
子组件向父组件传值
子组件向父组件传值时,子组件中 通过$.emit('自定义名字',‘要传递的数据’)
父组件通过 v-on:子组件自定义的名字 = 函数 函数的arguments中就会接收到这个值
<div id="app">
<!-- 绑定要发送的消息的名称 -->
<wulv @aabb="abc"></wulv>
</div> Vue.component('wulv',{
template:'<div><button @click="btn">按钮</button></div>',
methods:{
btn(){
// 发送消息
// 事件的名称 后面所有的都是要传递的消息
this.$emit('aabb','a','b','c');
}
}
}); new Vue({
el:'#app',
methods:{
abc(){
console.log(arguments); // 这里的arguments就是传递过来的值
}
}
})
父子组件传值非常简单,多用几次就可以学会了,在此作为笔记记录下来。
如果你有幸看到我的文章学到了一点东西,我会非常高兴的。
vue父子组件之间传值的更多相关文章
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- Vue父子,子父,非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- vue 父子组件互相传值容易出现的报错
对于父子组件之间的互相传值,报错如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w ...
- React学习——通过模态框中的表单,学习父子组件之间传值
import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- Vue父子组件之间的相互通信
组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...
随机推荐
- [Swift]LeetCode454. 四数相加 II | 4Sum II
Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l)there are such th ...
- [Swift]LeetCode911. 在线选举 | Online Election
In an election, the i-th vote was cast for persons[i] at time times[i]. Now, we would like to implem ...
- 构建multipart/form-data实现文件上传
构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...
- Linux 实现服务器之间时间同步
在主服务器上安装NTP时间同步服务器 yum -y install ntp vim /etc/ntp.conf 手动添加两行 server 127.127.1.0 fudge 127.127.1.0 ...
- mybatis-generator XML Parser Error on line 38: 必须为元素类型 "table" 声明属性 "enableInsertByPrimaryKey"。
1. 解决方法 在 table 元素中删除属性 enableInsertByPrimaryKey 即可.就是这么神奇... 2. 情景重现 使用 mybatis-generator 插件生成代码时报错 ...
- 小程序webview实践
小程序webview实践 -- 张所勇 大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原理,而我主要想讲的是小程序内 ...
- [Reversing.kr] Easy ELF Writeup
IDA打开,看到main()函数,当sub_8048451() 返回1 是flag正确. 跟踪函数. 脚本: #!usr/bin/env python #!coding=utf-8 __author_ ...
- AI 这么优秀,连我鉴黄师的饭碗都抢了
色情行业,或许是对信息渠道最敏锐.利用各类信息渠道进行传播最“充分”的“行业”.这些年,社交 App.直播.短视频等新的互联网应用方式,都难逃色情内容的“骚扰”.哪里人多,色情内容就能立刻扑过去,在海 ...
- 利用NPOI生成word文档(c#)
WordTest.aspx.cs using System; using System.IO; using System.Text; using System.Web; using System.We ...
- Echarts图标自适应问题(已解决)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...