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教程39 纹理映射(9)
原文:Directx11教程39 纹理映射(9) 在myTutorialD3D11_32中,我们在PlaneModelClass中增加一个纹理TextureClass* m_Texture;读 ...
- spring自动扫描的注解@Component @Controller @Service @Repository
@Component @Controller @Service @Repository的作用 1.@controller 控制器(注入服务)2.@service 服务(注入dao)3.@reposit ...
- Docker Remote API使用准备
1 修改配置文件 CentOS: /etc/sysconfig/docker Ubuntu: /etc/init/docker.conf 1.添加: DOCKER_OPTS='-H tcp://0.0 ...
- firefox扩展开发(二)：用XUL创建窗口控件
firefox扩展开发(二):用XUL创建窗口控件 2008-06-11 16:57 1.创建一个简单的窗口 <?xml version="1.0"?> <?xm ...
- Python发送邮件(带附件的)
有时候做自动化测试任务,任务完成后,需要将结果自动发送一封邮件,这里用到smtplib模块,直接导入就行,这里以163邮箱为例,需要用到授权码,我用类写一下: 如果是发送qq邮箱,要将smtp 改成s ...
- 分享 KubeCon 2019 （上海）关于 Serverless 及 Knative 相关演讲会议
有幸参加了 KubeCon 2019 上海大会,并参加了 Knative 及 Serverless 相关的几场分享会,收获满满.这里简单介绍一下各个演讲主题的主要内容.详细的演讲主题文档可以在Kube ...
- AtCoder Beginner Contest 075 C bridge【图论求桥】
AtCoder Beginner Contest 075 C bridge 桥就是指图中这样的边,删除它以后整个图不连通.本题就是求桥个数的裸题. dfn[u]指在dfs中搜索到u节点的次序值,low ...
- 2019-11-19-git-修改commit日期为之前的日期
title author date CreateTime categories git 修改commit日期为之前的日期 lindexi 2019-11-19 08:53:16 +0800 2018- ...
- 重磅开源|AOP for Flutter开发利器——AspectD
https://github.com/alibaba-flutter/aspectd 问题背景 随着Flutter这一框架的快速发展,有越来越多的业务开始使用Flutter来重构或新建其产品.但在我们 ...
- P2P四红线
P2P四红线 刘张君指出,P2P网络借贷平台是一种新兴金融业态,在鼓励其创新发展的同时,要记住四点:一是要明确这个平台的中介性质,二是要明确平台本身不得提供担保,三是不得将归集资金搞资金池,四是不得非 ...