vue 组件通信传值
父子组件通信:
子组件
<template>
<div>
<h3 @click="alerrt"> 我是子组件一</h3>
<span>{{parentMessage}}</span>
</div>
</template>
<script>
export default{
props: ['parentMessage'],
mounted() {
// this.$emit('childEvent');
},
methods:{
alerrt(){
this.$emit('childEvent',{name:'zhangsan',age: });
}
} }
</script>
<style scoped>
</style>
父组件
<template>
<div>
<h2>父组件</h2>
<span>父组件传递消息给子组件</span>
<br>
<router-view @childEvent="parentMethod" :parentMessage="parentMessage" />
<!-- <Child-one :parentMessage="parentMessage"></Child-one> -->
<button type="" @click='extendTest'>extend</button>
<div id="extend"></div>
</div>
</template>
<script>
import ChildOne from './ChildOne'
export default{
components: {
ChildOne
},
methods: {
parentMethod({name,age}) {
alert(this.parentMessage);
console.log(this.parentMessage,name,age);
},
extendTest() {
console.log('');
var Extend = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
new Extend().$mount('#extend')
},
},
data () {
return {
parentMessage: '我是来自父组件的消息aaaa'
} } }
</script>
<style scoped>
</style>
兄弟组件通信:
在main,js里加
vue 组件通信传值的更多相关文章
- vue组件通信传值——Vuex
一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- 【Vue组件通信】props、$ref、$emit,组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue组件通信新姿势
在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...
- vue组件通信全面总结
写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
- Vue组件间传值 v-model
使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我 ...
随机推荐
- 为何Google这类巨头会认为敏捷开发原则是废话?
[编者按]这是一个来自Quora的问题.Rocket程序员Jasmine Adamson在文中表达了敏捷开发原则是废话的观点,他觉得现实生活中没有什么人会推崇这些原则来工作,不过他们仍然在说其所做的是 ...
- Linux基础命令第二波
第1章 Linux启动过程 开机自检(BIOS)##硬件检查 MBR引导 GRUB菜单(选择不同的内核) 加载内核 运行init进程(Linux系统里面第一个进程) 读取/etc/inittab配置文 ...
- 解决UTF-8方法归纳
1:通过spring配置过滤器解决 <!-- 配置Spring提供的字符编码过滤器 --> <filter> <filter-name>SpringCharacte ...
- pcntl研究
虽说php用于并发计算有点山寨,但总比没有强把.(有问题请指正) 下面是pcntl多线程的例子.(只能用于cli模式,而且只能用于linux环境) <?php $starttime=microt ...
- [App Store Connect帮助]三、管理 App 和版本(3)查找 App
在“我的 App”中,使用工具栏控件快速查找 App. 搜索 App: 在搜索栏中输入文本. 您可以输入 App 的名称.Apple ID(App 标识符).套装 ID,或 SKU.套装 ID 和 S ...
- Akka源码分析-local-DeathWatch
生命周期监控,也就是死亡监控,是akka编程中常用的机制.比如我们有了某个actor的ActorRef之后,希望在该actor死亡之后收到响应的消息,此时我们就可以使用watch函数达到这一目的. c ...
- vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property 'range' of null 错误
改问题是"babel-eslint"版本更新问题导致的: 给大家一个最简单粗暴的解决方案: 在项目里找到对应的工程:直接删除里面的node_modules文件夹,然后重新npm i ...
- c/c++ 参数传递 - 数组
对于函数参数中的数组类型:传递的是数组地址,可以理解成传递的是对数组的引用.不是值传递,这是由C/C++函数实现机制决定的.一下三种函数生命完全等价: void func(int array[10]) ...
- Java系列学习(十二)-开始Eclipse
1.用Eclipse来写一个HelloWorld (1)选择工作空间 工作空间其实就是我们写的源代码所在的目录 (2)创建一个Java项目 [File-New-Java Project] (3)创建包 ...
- JS高级——instanceof语法
基本语法 对象 instanceof 构造函数 基本使用 <script> function Person() { } //p--->Person.prototype--->O ...