父组件 -> 子组件

通过props来进行通信
父组件代码:

<Children
:dataName = "dataContent"
/>
//dataName: 传过去数据的名字
//dataContent: 传过去的数据

子组件代码:

<script>
export default {
props:['dataName ']
}
console.log(this.dataName)//通过 "this.父组件传过数据名" 来调用
</script>

子组件 -> 父组件

子组件代码:

this.$emit('dataName1',dataContnet1)
//通过this.$emit()来发送你想要发送的数据
//dataName1: 传过去数据的名字
//dataContent1: 传过去的数据

父组件代码:

<Children
@dataName1 = 'newFuncName'
/>
//dataName1: 传过去数据的名字
//newFuncName: 接收的方法名 <script>
export default {
methods: {
newFuncName: function (data) {
console.log(data)
//data 就是你想要传的数据
}
}
} </script>

原文地址:https://segmentfault.com/a/1190000012783745

vue父子组件通信传值的更多相关文章

  1. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

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

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

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

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

  4. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  5. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  6. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  7. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  8. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

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

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

随机推荐

  1. linux下如何查看cpu信息

    linux的cpu信息可以从文件中cpuinfo读取. 执行命令: # cat  /proc/cpuinfo   我们一般看到的processor是逻辑核. 它的计数是从0开始的,例如这里看到的是31 ...

  2. 小学生绞尽脑汁也学不会的python(面对对象-----类与类之间的关系)

    小学生绞尽脑汁也学不会的python(面对对象-----类与类之间的关系 1. 依赖关系. 最轻的一种关系 在方法中引入另一个类的对象 class Elephant: def __init__(sel ...

  3. Shiro:整合swagger2时需要放行的资源

    filterMap.put("/swagger-ui.html", "anon"); filterMap.put("/swagger-resource ...

  4. ASP.NET-常用正则表达式

    常用正则表达式 正则: [RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}", ErrorMes ...

  5. spring mvc常用知识点总结

    1.spring mvc是靠spring 启动的.通过springjar包的org.springframework.web.servlet.DispatcherServlet这个servlet类具体启 ...

  6. 怎样注冊 diskgroup 到集群

    之前使用 renamedg  对 ora.CRS.dg 进行重命名ora.DUPCRS.dg 可是 renamedg 有个缺点就是无法将改动的信息同步到整个集群层面,并且改动前的dg 会依旧保留在集群 ...

  7. sigprocmask和信号阻塞

    注意阻塞和忽略,是有区别的. 阻塞只是暂时的,忽略是就没了. 参数:how:用于指定信号修改的方式,可能选择有三种:SIG_BLOCK //加入信号到进程屏蔽.SIG_UNBLOCK //从进程屏蔽里 ...

  8. QT5 OpenGL (六, 键盘事件, 开关灯,放大缩小综合运用)

    概要 实例效果图 立体图放大图 立体图缩小图 不加矢量开灯图 不加矢量关灯图 加矢量关灯图1 加矢量关灯图2 部分代码展示 主要内容解析 QT键盘事件 立体图形的放大和缩小 上下左右键以及A键D争键控 ...

  9. lucene构建restful风格的简单搜索引擎服务

    来自于本人博客: lucene构建restful风格的简单搜索引擎服务 本人的博客如今也要改成使用lucene进行全文检索的功能,因此在这里把代码贴出来与大家分享 一,文件夹结构: 二,配置文件: 总 ...

  10. spring RestTemplate 实例(NameValuePair)

    第一种: public List<NameValuePair> getThirdsysPermissionRest(String url,ThirdsysFuncpDTO thirdsys ...