Vue组件中的父子传值
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue-2.4.0.js"></script>
</head> <body> <div id="app">
<login v-bind:parentmsg="msg" @func='getmsgFromSon'></login>
</div> <template id="temp">
<div>
<h1>这是组件的模板----{{ parentmsg }}</h1> <!-- 子组件通过事件绑定机制向父组件传递消息 -->
<input type="button" value="向父组件传递消息" @click='sendMes'>
</div>
</template> <script>
var login = {
template: '#temp',
data() {
return {
msg: "这是子组件中的值，儿子已经长大了，该给爸爸1000元钱了"
}
},
methods: {
sendMes() {
this.$emit('func',this.msg)
}
},
props: ['parentmsg']
} var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的值，爸爸有100块钱，儿子你要不？',
msgFromSon: ''
},
methods: {
getmsgFromSon(data) {
this.msgFromSon = data
console.log(this.msgFromSon)
}
},
components: {
login
} });
</script>
</body> </html>
Vue组件中的父子传值的更多相关文章
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 第七十三篇：解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
随机推荐
- Directx11教程(20) 一个简单的水面
原文:Directx11教程(20) 一个简单的水面 nnd,以前发的这篇教程怎么没有了?是我自己误删除了,还是被系统删除了? 找不到存稿了,没有心情再写一遍了. 简单说一下,本篇教程就是实 ...
- PHPCMS快速建站系列之常用标签
<span class="Nmore"><a href="/index.php?m=content&c=index&a=lists&am ...
- MongoDB sharding 集合不分片性能更高？
最近云上用户用户遇到一个 sharding 集群性能问题的疑惑,比较有代表性,简单分享一下 测试配置 mongos x 2.shard x 3 测试1:集合不开启分片,批量 insert 导入数据,每 ...
- 反射技术总结 Day25
反射总结 反射的应用场合: 在编译时根本无法知道该对象或类属于那些类, 程序只依靠运行时信息去发现类和对象的真实信息 反射的作用: 通过反射可以使程序代码访问到已经装载到JVM中的类的内部信息(属性 ...
- 2019-3-13-win10-uwp-使用-ScaleTransform-放大某个元素
title author date CreateTime categories win10 uwp 使用 ScaleTransform 放大某个元素 lindexi 2019-3-13 19:5:56 ...
- SDUT-3347_数据结构实验之数组三：快速转置
数据结构实验之数组三:快速转置 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 转置运算是一种最简单的矩阵运算,对于一个 ...
- Python基础：常用函数
1:enumerate enumerate(sequence, start=0) 该函数返回一个enumerate对象(一个迭代器).其中的sequence参数可以是序列.迭代器或者支持迭代的其他对象 ...
- E. Remainder Problem 分块
两个操作 1对x位置的a[x]+y 2对所有i=y(mod x)求a[i]的和 我们肯定不能n^2 跑,稳超时,但是我们可以这样分块考虑. 为什么n^2不行?因为在x比较小的时候,这个求和操作次数太多 ...
- hdu 1434 幸福列车 (Leftist Tree)
Problem - 1434 网上题解是普通的堆合并,都是用优先队列直接做的.可是正解的堆合并应该是用左偏堆或者斐波那契堆的吧,不然O(X * N ^ 2)的复杂度应该是过不了的.斐波那契堆的实现相对 ...
- MySQL数据库字符集和整理
MySQL数据库字符集和整理(2009-11-20 22:23:37) mysql数据库 it 其实这个表在MySQL数据库中通过phpMyAdmin就能看到,icech只是把表格整理了一下方便 ...