Vue 常用三种传值方式
Vue常用的三种传值方式:
父传子
子传父
非父子传值
引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。
1. 父组件向子组件传值:
父组件:
- <template>
- <div>
- 父组件:
- <input type="text" v-model="name">
- <br>
- <br>
- <!-- 引入子组件 -->
- <child :inputName="name"></child>
- </div>
- </template>
- <script>
- import child from './child'
- export default {
- components: {
- child
- },
- data () {
- return {
- name: ''
- }
- }
- }
- </script>
子组件:
- <template>
- <div>
- 子组件:
- <span>{{inputName}}</span>
- </div>
- </template>
- <script>
- export default {
- // 接受父组件的值
- props: {
- inputName: String,
- required: true
- }
- }
- </script>
2. 子组件向父组件传值:
子组件:
- <template>
- <div>
- 子组件:
- <span>{{childValue}}</span>
- <!-- 定义一个子组件传值的方法 -->
- <input type="button" value="点击触发" @click="childClick">
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- childValue: '我是子组件的数据'
- }
- },
- methods: {
- childClick () {
- // childByValue是在父组件on监听的方法
- // 第二个参数this.childValue是需要传的值
- this.$emit('childByValue', this.childValue)
- }
- }
- }
- </script>
父组件:
- <template>
- <div>
- 父组件:
- <span>{{name}}</span>
- <br>
- <br>
- <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
- <child v-on:childByValue="childByValue"></child>
- </div>
- </template>
- <script>
- import child from './child'
- export default {
- components: {
- child
- },
- data () {
- return {
- name: ''
- }
- },
- methods: {
- childByValue: function (childValue) {
- // childValue就是子组件传过来的值
- this.name = childValue
- }
- }
- }
- </script>
3. 非父子组件传值:
非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
公共 bus.js
- //bus.js
- import Vue from 'vue'
- export default new Vue()
组件A:
- <template>
- <div>
- A组件:
- <span>{{elementValue}}</span>
- <input type="button" value="点击触发" @click="elementByValue">
- </div>
- </template>
- <script>
- // 引入公共的bug,来做为中间传达的工具
- import Bus from './bus.js'
- export default {
- data () {
- return {
- elementValue: 4
- }
- },
- methods: {
- elementByValue: function () {
- Bus.$emit('val', this.elementValue)
- }
- }
- }
- </script>
组件B:
- <template>
- <div>
- B组件:
- <input type="button" value="点击触发" @click="getData">
- <span>{{name}}</span>
- </div>
- </template>
- <script>
- import Bus from './bus.js'
- export default {
- data () {
- return {
- name: 0
- }
- },
- mounted: function () {
- var vm = this
- // 用$on事件来接收参数
- Bus.$on('val', (data) => {
- console.log(data)
- vm.name = data
- })
- },
- methods: {
- getData: function () {
- this.name++
- }
- }
- }
- </script>
每日壹题:
打印出 1 - 10000 之间的所有对称数
- console.log([...Array(10000).keys()].filter((x) => {
- return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join(''))
- }))
Vue 常用三种传值方式的更多相关文章
- django之创建第7-6-第三种传值方式
1.创建bar.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- mybatis三种传值方式
第一种:按序列传参(dao层的函数方法)[sql] Public User selectUser(String name,String area); 对应的Mapper.xml [sql] <s ...
- Vue中常用的三种传值方式
父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...
- Vue的七种传值方式
目录 1,父传子 2,子传父 3,兄弟组件传值 4,父组件使用子组件的数据和方法 5,子组件使用父组件的数据和方法 6,Vuex传值 6.1,定义store 6.2,挂载 6.3,使用 7,路由传值 ...
- (二)微信小程序的三种传值方式
1.全局变量 app.js里 App({ //全局变量 globalData: { userInfo: null, host: 'http://localhost:8080/data.json' } ...
- Vue中两种传值方式
第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
随机推荐
- 分表分库解决方案(mycat,tidb,shardingjdbc)
公司最近有分表分库的需求,所以整理一下分表分库的解决方案以及相关问题. 1.sharding-jdbc(sharding-sphere) 优点: 1.可适用于任何基于java的ORM框架,如:JPA. ...
- Java高级特性——流
以上就是这段时间学习完流的知识以后我的总结,.mmap文件可以去我的github上获取:https://github.com/xiaozhengyu/StudyNotes.git
- Django 链接MySQL及数据操作
Django 链接MySQL Django创建的项目自带的数据库是SQLite3,我们想要链接MySQL的话,需要更改settings.py中的配置 1.在MySQL中创建好数据库,Django项目不 ...
- 「Luogu P3395」路障 解题报告
点开有惊喜 其实是题面 这D1T1给的很有面子! 我居然做的来! 从左上角走到右上角 然后n<=1000 所以果断放弃DFS,选择BFS 思路还是一样的BFS 证明: 走到一个点的时间越早越好( ...
- bootstrap:导航下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 爆破linux密码 $6$3uwqC9JI$d9iPRmTDAoXs/IbsplxS3iyeErHqw7fUycacXNHyZk1UCSwFEydl515/zXN7OEwHnyUaqYcNG
#!/usr/bin/env python # -*- coding:UTF-8 -*- import crypt import sys # 哈希密码的前两位就是盐的前两位,这里我们假设盐只有两位. ...
- ASCII、UNICODE、UTF
在计算机中,一个字节对应8位,每位可以用0或1表示,因此一个字节可以表示256种情况. ascii 美国人用了一个字节中的后7位来表达他们常用的字符,最高位一直是0,这便是ascii码. 因此asci ...
- Yolo V3整体思路流程详解!
结合开源项目tensorflow-yolov3(https://link.zhihu.com/?target=https%3A//github.com/YunYang1994/tensorflow-y ...
- java架构之路(多线程)synchronized详解以及锁的膨胀升级过程
上几次博客,我们把volatile基本都说完了,剩下的还有我们的synchronized,还有我们的AQS,这次博客我来说一下synchronized的使用和原理. synchronized是jvm内 ...
- php5升php7代码修改整理
1. 为什么升级至php7 a.安全需要 过早以至于不维护的php版本难免会有未修补的漏洞,安全性要求较高的行业是要及时升级的. b.性能提升(开启opcache hugepage) 据说性能提升一倍 ...