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 ...
随机推荐
- IIS搭建ASP站点
1. 进入控制面板悬着打开或者关闭Windows功能. 2. 手工选择需要的功能进行安装. 3. 打开运行Internet信息服务(IIS)管理工具. 4. 展开左侧栏看到“Default Web S ...
- Reservoir Sampling 蓄水池采样算法
https://blog.csdn.net/huagong_adu/article/details/7619665 https://www.jianshu.com/p/63f6cf19923d htt ...
- Hive运行引擎Tez的安装
简介 Tez是Apache开源的支持DAG作业的计算框架,它直接源于MapReduce框架,核心思想是将Map和Reduce两个操作进一步拆分,即Map被拆分成Input.Processor.Sort ...
- linux下18种监测网络带宽方式
1. nload nload是一个命令行工具,让用户可以分开来监控入站流量和出站流量.它还可以绘制图表以显示入站流量和出站流量,视图比例可以调整.用起来很简单,不支持许多选项. 所以,如果你只需要快速 ...
- C# 对Outlook2010进行二次开发
第一步:添加新项目 第二步:添加新的页签,注意,此页签是显示到Outlook主界面的 第三步:添加自己想要的文本框以及按钮 第四步:如果你想将此界面显示到主界面的话,需要这样设置:属性里面的Ribbo ...
- Maven+Docker 部署
Maven+Docker 部署 安装jdk8镜像 docker pull openjdk:8-jdk-alpine maven插件推送方式 修改/etc/docker/daemon.json文件,加入 ...
- I have Flash Player installed, but I am unable to view Flash content in Chromium. How do I enable Flash Player to view this content?
I have Flash Player installed, but I am unable to view Flash content in Chromium. How do I enable Fl ...
- Hihocoder #1142 : 三分·三分求极值
1142 : 三分·三分求极值 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 这一次我们就简单一点了,题目在此: 在直角坐标系中有一条抛物线y=ax^2+bx+c和一个 ...
- slf4j、jcl、jul、log4j1、log4j2、logback大总结[转]
#1 系列目录 jdk-logging.log4j.logback日志介绍及原理 commons-logging与jdk-logging.log4j1.log4j2.logback的集成原理 slf4 ...
- 线段树详解 (原理,实现与应用)(转载自:http://blog.csdn.net/zearot/article/details/48299459)
原文地址:http://blog.csdn.net/zearot/article/details/48299459(如有侵权,请联系博主,立即删除.) 线段树详解 By 岩之痕 目录: 一:综述 ...