一 :父组件 传值给 子组件

方法: props

//父组件
<template lang="html">
<div>
<h3>我是父亲</h3>
<Children :patText="partentText"/>
</div>
</template> <script>
import Children from "./children"
export default {
data () {
return {
partentText: "我是要给儿子的值"
}
},
components: {
Children
},
computed: {
},
methods:{
}
}
</script> //子组件
<template lang="html">
<div>
<h3>小儿子</h3>
<p>展示父组件传递的值 {{ patText }}</p>
</div>
</template> <script>
export default {
name: 'Children',
data () {
return {
}
},
props:{
patText:{
type: String,//类型为字符窜
default: "123"//默认类型
}
}
}

一 :子组建 传值给 父组建

方法: $emit

//父组件
1 <template lang="html">
2 <div>
3 <h3>我是父亲</h3>
4 <Children @keyk="watchChild"/>
5 </div>
6 </template>
7
8 <script>
9 import Children from "./children"
10 export default {
11 data () {
12 return {
13 }
14 },
15 components: {
16 Children
17 },
18 computed: {
19 },
20 methods:{
21 watchChild(data) {
22 console.log(data);
23 }
24 }
25 }
26 </script>

//子组件
<template lang="html">
<div>
<h3>小儿子</h3>
<button @click="target">点击触发</button>
</div>
</template> <script>
export default {
name: 'Children',
data () {
return {
childText: "我将要给到父亲去"
}
},
props:{
patText:{
type: String,//类型为字符窜
default: "123"//默认类型
}
},
methods:{
target() {
this.$emit('keyk',this.childText)
}
}
}
</script>

路由传值:

方法: $route.parms

注意是$route 不是 $router

//路由
<router-link :to="{ name: '', params: {newsHeader: '消息'} }"></router-link> //组件中获取
this.$route.parms.newsHeader

vue 组件传值,(太久不用就会忘记,留在博客里,方便自己查看)的更多相关文章

  1. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. Vue组件传值方法调用

    1.子组件改变父组件的值 <father  label="云盘快照" name="name2"> <son :props='rows'   @ ...

  4. vue ---- 组件传值之间使用 v-model

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  5. vue组件传值的三种方式,文字版解释

    父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...

  6. Vue组件传值,父传子,子传父,非父子组件

    vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...

  7. Vue 组件 传值

    注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...

  8. vue组件传值 part2

    非父子组件传值 轻量级 视图层框架 复杂组件间传值,引进其他的工具或者设计模式 1.vuex 2.总线机制 //main line 1.在main.js中注册全局的bus Vue.prototype. ...

  9. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

随机推荐

  1. Windows上使用jekyll+github搭建免费博客

    jekyll+github搭建个人博客 (一)下载Ruby (二)安装jekyll (三)开启jekyll服务器 (四)使用github展示博客 一.下载Ruby Ruby,一种简单快捷的面向对象(面 ...

  2. Docker数据卷和数据卷容器

    是什么 数据卷设计的目的,在于数据的永久化,他完全独立于容器的生存周期,因此,Docker不会在容器删除时删除其挂载的数据卷,也不会存在类似的垃圾收集机制对容器引用的数据卷进行处理.类似我们Redis ...

  3. Java Web学习(三)数据加密方式详解

    一.对称加密 定义:加密和解密使用相同密钥的算法. 常见的有DES.3DES.AES.PBE等加密算法,这几种算法安全性依次是逐渐增强的. DES加密 特点:简便.密钥长度比较短. import ja ...

  4. 刷题[RCTF 2019]Nextphp

    前置知识 一些关于php7.4版本需知: 1.FFI扩展:ffi.cdef 其中还有这样一段话 如果ffi.cdef没有第二个参数,会在全局查找,第一个参数所声明的符号.意思就是其在不传入第二个参数时 ...

  5. 图片压缩工具pngquant

    关于图片压缩的,之前看到一个imageOptim,用着不错,也挺好用的,直接打开要压缩的图片或者文件夹,唰唰唰的就开始压缩了,如下图 后来觉得不是很方面,还要打开软件,选择文件夹,然后就又研究了一下, ...

  6. VARCHART XGantt如何计算截止日期

    甘特图从1998年的第一个商用版本开始就致力于计划编制和项目管理方面控件的研究和开发,经过20多年的积累和沉淀,目前可为软件开发商和最终用户提供最顶级的计划编制和项目管理的控件产品,帮助用户快速的整合 ...

  7. 使用Ajax新闻系统管理需求分析

      新闻系统管理需求分析 1.1项目背景 新闻发布系统(News Release System or Content Management System),是一个基于新闻和内容管理的全站管理系统,本系 ...

  8. Java 读取文件中的每一行,并为每一行插入特定的字符串

    工具 1:Eclipse Java EE IDE for Web Developers. Version: Photon Release (4.8.0). Build id: 20180619-120 ...

  9. Ubuntu开启/var/log/messages

    # 添加配置到/etc/rsyslog.d/50-default.conf cat <<'EOF' | sudo tee -a /etc/rsyslog.d/50-default.conf ...

  10. C语言编程入门之--第六章C语言控制语句

    导读:本章带读者理解什么是控制语句,然后逐个讲解C语言常用的控制语句,含有控制语句的代码量多起来后就要注意写代码的风格了,本章末节都是练习题,大量的练习才能掌握好控制语句的使用. 6.1 什么是控制语 ...