一:父组件向子组件传递参数

<template >
<div id="app">
<h1 v-text="title"></h1> <input type="text" v-model="newItem" @keyup.enter="addNew"> <ul>
<li v-for="(list,index) in items" :class="{finished: list.isFinished}" @click="toggleFinish(list)" :key="index" :id="index">
{{list.label}}
</li>
</ul> <hello2 msgfromfather="今天下大雨了">引入组件</hello2>
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>

子组件需要做的事情:

<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
props: ['msgfromfather'],
methods: {
onClickMe: function () {
console.log(this.msgfromfather)
}
}
}
</script> 模板展示
<h2>{{msgfromfather}}</h2>

二:子组件向父组件传递参数

Vue学习笔记(三)组件间如何通信传递参数的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  3. Vue学习笔记三:v-bind,v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  4. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  5. Vue 学习笔记之 —— 组件(踩了个坑)

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  6. React学习笔记(三) 组件传值

    组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...

  7. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  8. vue学习笔记(三):vue-cli脚手架搭建

    一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli     ...

  9. vue学习笔记三:常见的表单绑定

    <template> <div id="app"> <input type="checkbox" id="checked ...

随机推荐

  1. Java基础 继承的方式创建多线程 / 线程模拟模拟火车站开启三个窗口售票

    继承的方式创建多线程 笔记: /**继承的方式创建多线程 * 线程的创建方法: * 1.创建一个继承于Thread 的子类 * 2.重写Thread类的run()方法 ,方法内实现此子线程 要完成的功 ...

  2. hi 北京

    一 . 感慨 借着参加北京物联网展会的这次机会,提前找老师批了大概两周的假期.当然也借着这次机会,尝试了第一次坐飞机.第一次来北京.心里也有点小激动,在路上甚至会想,我是不是要重新规划一下我的人生了呢 ...

  3. FineAdmin.Mvc 使用ok-admin+ASP.NET MVC搭建的通用权限后台管理系统

    FineAdmin.Mvc 介绍 使用ok-admin+ASP.NET MVC搭建的通用权限后台管理系统RightControl后台layui模板不太好看,换成ok-admin v2.0重写一遍.项目 ...

  4. v-model原理解析

    vue中v-model可以实现数据的双向绑定,但是为什么这个指令就可以实现数据的双向绑定呢? 其实v-model是vue的一个语法糖.即利用v-model绑定数据后,既绑定了数据,又添加了一个inpu ...

  5. ubuntu 16.04 TLS 安装VNC

    安装 #autocuftsel 用于vnc两段的复制粘贴 sudo apt-get install autocutsel 安装 vncserversudo apt-get install --no-i ...

  6. Java8-Lock-No.04

    import java.util.HashMap; import java.util.Map; import java.util.concurrent.ExecutorService; import ...

  7. Lock的lock/unlock, condition的await/singal 和 Object的wait/notify 的区别

    在使用Lock之前,我们都使用Object 的wait和notify实现同步的.举例来说,一个producer和consumer,consumer发现没有东西了,等待,produer生成东西了,唤醒. ...

  8. learning express step(七)

    Route handlers enable you to define multiple routes for a path. The example below defines two routes ...

  9. Java进阶知识21 Spring的AOP编程

    1.概述 Aop:(Aspect Oriented Programming)面向切面编程          功能: 让关注点代码与业务代码分离! 关注点:重复代码就叫做关注点:切面: 关注点形成的类, ...

  10. vue 中 v-model

    一.v-model: 先上段简单的 vue 代码: // 定义 v-model 示例组件 Vue.component('bindData', { template:` <div> < ...