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 ...
随机推荐
- PHPCMS快速建站系列之添加单页模版
单页模板命名:page_xxx.html 以page_开头 在模版所在目录的config.php中添加配置项 'page_xxx.html' => '单网页', 也可以不在config中配置,不 ...
- 用Sketch和PaintCode快速得到绘制代码
http://www.cocoachina.com/ios/20150901/13155.html 作者:codeGlider 授权本站转载. 在我的上一篇文章中 swift10分钟实现炫酷的导航控制 ...
- SqlSugar 笔记
分组: 日期分组一: var result = await temp .GroupBy("date_format(Day,'%Y-%m')") .Select(s => ne ...
- 《DL/T 976-2017 带电作业用工具、装置和设备预防性试验规程》中的样品名称及试验项目
- HZOJ Drink
神仙题,打了个whs式暴力卡常卡A了(我没脸),正解还是要打的,然而作者的题解看不懂…… Drink: 看惯了罗马音的小朋友们都会知道r发l的音,题目名:D Link. 每次修改都会改变O( N ^ ...
- js下载文件方法与原理小分析
原理:html的a标签,设置dawnload属性后,可以下载href指向的文件. 在js中往往是点击某一个按钮后下载一个文件,并且文件的地址是变化的.因此我们可以动态创建一个a标签,设置好downlo ...
- oracle函数 add_months(d1,n1)
[功能]:返回在日期d1基础上再加n1个月后新的日期. [参数]:d1,日期型,n1数字型 [返回]:日期
- IOS开发之UISearchBar自定义外观
MySearchBar.h如下: @interface MySearchBar : UISearchBar - (void)layoutSubviews; @end MySearchBar.m如下 ...
- 异常解决：non-compatible bean definition of same name and class【com.xxx.xxx.XXX】
昨天同事遇到这样一个问题,意思是spring找到 有相同的实现类名在不同的package目录下. 跟踪他的项目代码并未发现问题. 重新给他的maven项目进行maven install一下. 查看 ...
- laravel多表登录出现路由调用错误
public function auth() { // Authentication Routes... $this->get('login', 'Auth\LoginController@sh ...