Vue学习笔记(三)组件间如何通信传递参数
一:父组件向子组件传递参数
<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学习笔记(三)组件间如何通信传递参数的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Vue学习笔记三:v-bind,v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- Vue 学习笔记之 —— 组件(踩了个坑)
最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- vue学习笔记(三):vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- vue学习笔记三:常见的表单绑定
<template> <div id="app"> <input type="checkbox" id="checked ...
随机推荐
- 如何在jupyter中安装R
地址:(http://irkernel.github.io/installation/) 第一步:在R中安装必备包 install.packages(c('repr', 'IRdisplay', 'e ...
- ggplot2绘制Excel所有图
出处:https://brucezhaor.github.io/blog/2016/06/13/excel2ggplot/#%E5%89%8D%E8%A8%80 目录 前言 1.用到的包 2.数据准备 ...
- MVC,MVP 和 MVVM 的图示 - 阮一峰
作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身 ...
- Mysql 随机获得表的几条记录
在做博客文章详情的时候,有一个拓展阅读的功能: 想法一:根据当前文章Id,写死两条链接,Id+1,Id-1,但是文章Id可能被删除,Id不连续,不可取.× 想法二:获得当前文章记录的前一条和后一条记录 ...
- vue slot及用法,$slots访问具名slot
- JavaScript, JQuery事件委托
1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工 ...
- 为什么size_t重要?(Why size_t matters)
之前在<内存拷贝的注意事项>一文中提到过size_t,可能许多人对这个类型不太熟悉没有用过或者根本不敢去用,最近看到一篇文章对这个类型讲的比较详细,便翻译过来让不熟悉的同学可以知道它产生的 ...
- python numpy的基本操作
站长资讯平台:文章目录0.NumPy 与 ndarry1.数组属性查看:类型.尺寸.形状.维度2.numpy元素中数据存储方式,数据类型,类型转换2.1 查看元素数据存储类型2.2 元素数据存储类型转 ...
- C语言学习系列(二)面向过程和面向对象
一.基本定义 (一).面向过程(procedure oriented programming POP) 面向过程是分析解决问题的步骤,然后用函数把这些步骤一步一步的实现,然后在使用的时候一一调用则可. ...
- [Debug] Dev tool Pause on caught exception
Chrome dev tool has "Pasue on caught exceptions" which is useful when there is expection t ...