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="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<!-- 01. 在son标签中, 添加一个属性 注意：使用msg属性传值时，f2s前加：-->
<son :f2s='msg'></son>
</div> <script>
const vm = new Vue({
el: '#app',
data() {
return {
msg: 'hello world'
}
},
methods: {},
components: {
// 组件名：组件参数
son: {
// 03组件中接收到的值的使用
template: '<h2>{{f2s}}</h2>',
// 02props属性接收
props: ['f2s']
}
}
});
</script>
</body> </html>
小结
在son标签中添加属性f2s（属性名可以随意起）、要传的值
在子组件中使用props接收, 然后template中使用
子组件->父组件
<!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="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<!-- 02. 引用组件
funfromson为子组件中$emit的第一个参数
fathermethod为父组件中用于接收参数的方法-->
<son @funfromson="fathermethod"></son>
</div> <script> const vm = new Vue({
el: '#app',
data() {
return { }
},
methods: {
// 03-父组件中接收子组件传参的方法，参数就是传的值
fathermethod(data) {
alert('收到子组件的数据' + data)
}
},
components: {
son: {
template: '<button @click="send2f">点击了子组件</button>',
methods: {
send2f() {
// 01-子组件->父组件通过this.$emit('父组件中引用子组件中的方法名','要传的参数')
this.$emit('funfromson', 'xxxx');
},
},
}
}
});
</script>
</body> </html>
小结
示例中子组件是一个按钮, 当点击按钮时, 触发按钮的点击事件, 调用子组件的send2f方法
在send2f方法中通过this.$emit()调用父组件的方法, 并将数据做为参数传递过去
Vue基础学习 --- 组件传值的更多相关文章
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- vue 父子间组件传值
1.父组件向子组件传值: 实例截图: 实例代码: /*子组件代码*/ //child.vue <template> <div style="border: 1px soli ...
- Vue基础学习（纯属个人学习的笔记，慢慢新增）
1.在html文件中,声明了template对象,那么在 data对象中的v-html和v-text的绑定数据是不起作用的 2.v-的几个常用绑定 v-html和v-text:引用的conten ...
随机推荐
- ES5_对象 与 继承
1. 对象的定义 //定义对象 function User(){ //在构造方法中定义属性 this.name = '张三'; this.age = 12; //在构造方法中定义方法: this.ru ...
- 【JUC】3.ReentrantLock
ReentrantLock实现Lock接口,所以先看下Lock接口: public interface Lock { // 获得锁 void lock(); // 获得锁 void unlock(); ...
- 阿里云ECS服务器设置端口（允许访问设置）
1.登录阿里云找到对应的服务器按照如下箭头指示: 2.点击“安全组配置”后进入到如下界面,点击“配置规则”进入详情配置界面. 3.点击“修改”可对特定的端口进行访问配置,如下图: 至此结束.
- Linux之nginx负载均衡
Nginx负载均衡概述 Web服务器,直接面向用户,往往要承载大量并发请求,单台服务器难以负荷,我使用多台WEB服务器组成集群,前端使用Nginx负载均衡,将请求分散的打到我们的后端服务器集群中,实现 ...
- LAMP环境搭建基本步骤
LAMP环境搭建基本步骤 参考链接https://yq.aliyun.com/articles/106387 apache性能优化.配置https://my.oschina.net/lockupme/ ...
- linux网络编程之socket编程(一)
今天开始,继续来学习linux编程,这次主要是研究下linux下的网络编程,而网络编程中最基本的需从socket编程开始,下面正式开始学习: 什么是socket: 在学习套接口之前,先要回顾一下Tcp ...
- 小程序框架之视图层 View~获取界面节点信息
获取界面上的节点信息 WXML节点信息 节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: ...
- HDU - 6125： Free from square （状压DP+分组背包）
problem:给定N,K.表示你有数1到N,让你最多选择K个数,问有多少种方案,使得选择的数的乘积无平方因子数.N,K<500: solution:显然可以状压DP做,但是500以内的素数还是 ...
- HihoCoder1236 Scores
Scores 求五维偏序(≤).强制在线. \(n,q\le 50000\) 烂大街的题解 考虑如果我们能用bitset找到每一维有哪些比询问点小,然后把每一维的结果取交集,得到的就是答案了. 然后对 ...
- CF600E Lomsat gelral 和 CF741D Dokhtar-kosh paths
Lomsat gelral 一棵以\(1\)为根的树有\(n\)个结点,每个结点都有一种颜色,每个颜色有一个编号,求树中每个子树的最多的颜色编号(若有数量一样的,则求编号和). \(n \le 10^ ...