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父子组件之间传值的更多相关文章

  1. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  2. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  3. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  4. 浅谈vue父子组件之间的传值

    前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...

  5. Vue父子,子父,非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

  6. vue 父子组件互相传值容易出现的报错

    对于父子组件之间的互相传值,报错如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w ...

  7. React学习——通过模态框中的表单,学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...

  8. VUE 父子组件之间通信传值 props和 $emit

    1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件          <div id="app" >               <tr ...

  9. Vue父子组件之间的相互通信

    组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...

随机推荐

  1. [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 ...

  2. [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 ...

  3. 构建multipart/form-data实现文件上传

    构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

  4. Linux 实现服务器之间时间同步

    在主服务器上安装NTP时间同步服务器 yum -y install ntp vim /etc/ntp.conf  手动添加两行 server 127.127.1.0 fudge 127.127.1.0 ...

  5. mybatis-generator XML Parser Error on line 38: 必须为元素类型 "table" 声明属性 "enableInsertByPrimaryKey"。

    1. 解决方法 在 table 元素中删除属性 enableInsertByPrimaryKey 即可.就是这么神奇... 2. 情景重现 使用 mybatis-generator 插件生成代码时报错 ...

  6. 小程序webview实践

    小程序webview实践 -- 张所勇 大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原理,而我主要想讲的是小程序内 ...

  7. [Reversing.kr] Easy ELF Writeup

    IDA打开,看到main()函数,当sub_8048451() 返回1 是flag正确. 跟踪函数. 脚本: #!usr/bin/env python #!coding=utf-8 __author_ ...

  8. AI 这么优秀,连我鉴黄师的饭碗都抢了

    色情行业,或许是对信息渠道最敏锐.利用各类信息渠道进行传播最“充分”的“行业”.这些年,社交 App.直播.短视频等新的互联网应用方式,都难逃色情内容的“骚扰”.哪里人多,色情内容就能立刻扑过去,在海 ...

  9. 利用NPOI生成word文档(c#)

    WordTest.aspx.cs using System; using System.IO; using System.Text; using System.Web; using System.We ...

  10. Echarts图标自适应问题(已解决)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...