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 我 ...
随机推荐
- ios3--UIView的常见方法
// // ViewController.m // 07-UIView的常见方法 // #import "ViewController.h" @interface ViewCont ...
- Bing Maps进阶系列三:使用地图图像服务(ImageryService)
Bing Maps进阶系列三:使用地图图像服务(ImageryService) 地图图像服务(ImageryService)提供了根据地理位置(经度和纬度)坐标和地图的缩放级别解析出对应于地图图片系统 ...
- AngularJS 1.x 国际化——Angular-translate例子
可运行代码如下: <!DOCTYPE html> <html ng-app="MyApp"> <head> <meta http-equi ...
- JSP-Runoob:JSP 状态码
ylbtech-JSP-Runoob:JSP 状态码 1.返回顶部 1. SP HTTP 状态码 HTTP请求与HTTP响应的格式相近,都有着如下结构: 以状态行+CRLF(回车换行)开始 零行或多行 ...
- 如何使jquery性能最佳
转自 http://www.cnblogs.com/mo-beifeng/archive/2012/02/02/2336228.html 1. 使用最新版本的jQuery jQuery的版本更新很快, ...
- 9.22 NOIP模拟题
吉林省信息学奥赛 2017 冬令营 ...
- 简单 android popupwindow 实现
1. popupWindow 设置大小: popupWindow = new PopupWindow(view, ViewGroup.LayoutParams.FILL_PARENT, ViewGr ...
- Android 在fragment中实现返回键单击提醒 双击退出
尝试用mvp架构加dagger2来重写了一下,大致功能都实现了,还没有全部完成. 项目地址 接近完成的时候,想在天气信息页面实现一个很常见的功能,也就是点击屏幕下方的返回键的时候不是返回到上一个act ...
- drupal 8——打补丁(patch)
druapl 的核心可能会有漏洞,这时就需要我们去打补丁.很多补丁都已经有人写好了,我这里讲的就是如何去打这些已经写好的补丁. 对于这个问题:drupal8 核心有bug导致了两个相同的错误提示的出现 ...
- WinServer2008配置任务计划
window server 2008下配置任务计划 打开window servers 2008下任务计划配置工具 点击“开始”-->“管理工具”-->“任务计划程序”,打开任务计划配置工具 ...