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 ...
随机推荐
- JDK源码解析string之二
(28) public boolean startsWith(String prefix, int toffset) { char ta[] = value; int to = toffset; ch ...
- vuxdemo1
//main.js import Vue from 'vue' import router from './router' import store from './store' import axi ...
- ActivityManagerService
先上类图: 基本类说明和运行框架图中蓝色表示AMS进程,黄色表示app进程.1. 全局调度者在android中,AMS是activity和进程的全局调度者,也就是说系统中载入和准备载入的activit ...
- Laravel 单设备登录
https://laravel-china.org/articles/10605/laravel-single-device-login 前几天在 laracasts 看了laravel5.6的新功能 ...
- APP上线前，如何做运营推广工作？
http://www.cocoachina.com/market/20150723/12731.html 一 竞品分析 1.选择竞品,做好定位(选择两个产品最好,最多三个). 如何获取竞品? A 百度 ...
- oralce update操作
1.基本语法:update 表名 set 列名=表达式 [列名=表达式. . . ] where 条件 2.使用的注意事项: v UPDATE语法可以用新值更新原有表行中的各列 把zs的性别改为女 ...
- Java练习 SDUT-2253_分数加减法
分数加减法 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 编写一个C程序,实现两个分数的加减法 Input 输入包含多 ...
- BZOJ 1834网络扩容题解
一道不算太难的题目 但是真的很恶心 显然,对于第一问,我们直接无脑打模板就好了 第二问也不是很难,我们将每条边再连一条容量为inf,费用为w的边 但是流量只要小于第一问的答案加k就行了 所以我们增加一 ...
- 【NS2】Ubuntu 12.04 LTS 中文输入法的安装（转载）
本文是笔者使用 Ubuntu 操作系统写的第一篇文章!参考了红黑联盟的这篇文章:Ubuntu 12.04中文输入法的安装 安装 Ubuntu 12.04 着实费力一番功夫,老是在用 Ubuntu 来引 ...
- C# —— 枚举
一.使用枚举的优点 枚举能够使代码更加的清晰,它允许使用描述性的名称表示整数值. 枚举使代码更易于维护,有助于确保给变量指定合法的.期望的值. 枚举使代码更易输入. 二.枚举说明 1.简单枚举 枚举使 ...