vue-父组件和路由
父子组件之间传值
<div id="app">
<com1 v-bind:parentmsg="msg" @func="getMsgFormSon"></com1>
</div>
<template id="tmpl">
<div>
<h1>这是子元素 --- {{ parentmsg }}</h1>
<input type="button" value="向父组件传递消息" @click="sendMsg">
</div>
</template>
var com1 = {
template: '#tmpl',
data() {
return {
msg: '做一个孝顺的孩子,给爸爸一些钱去挥霍吧!'
}
},
props: ['parentmsg'],
methods: {
sendMsg() {
this.$emit('func', this.msg)
}
}
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的数据,爸爸有100块钱,my son, 你要不',
msgFormSon: ''
},
methods: {
getMsgFormSon(data) {
this.msgFormSon = data
console.log(this.msgFormSon)
}
},
components: {
com1
}
});
路由的基本使用
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 容器 -->
<router-view></router-view>
</div>
// 2. 创建子组件
var login = {
template: '<h3>这是登录子组件,这个组件是 奔波霸 开发的。</h3>'
}
var register = {
template: '<h3>这是注册子组件,这个组件是 霸波奔 开发的。</h3>'
}
// 3. 创建一个路由对象
var router = new VueRouter({
routes: [ // 路由规则数组
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive' // 和激活相关的类
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
vue-父组件和路由的更多相关文章
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
- Vue 父组件传值到子组件
vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接 msg="xxx"就好 这里动态取值的话就 :msg=xxxxx ________ ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- vue父组件引用子组件方法显示undefined问题原因及解决方法
关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...
- vue 父组件与子组件的三生三世
父组件和子组件相互传值:https://www.cnblogs.com/cxscode/p/11187989.html vue父组件触发子组件方法:https://www.cnblogs.com/cx ...
- Vue父组件主动获取子组件的数据和方法
Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131
- 记录21.07.24 —— Vue的组件与路由
VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...
随机推荐
- RabbitMQ的高级特性概念理解
1.RabbitMQ中的消息如何保障百分之百的投递成功? 答:百分之百的投递成功,方案可以参考下面的2.3. 2.什么是生产者端的可靠性投递? 答:第一步,生产者保障消息的成功发出.第二步,保障Rab ...
- [browser navigator 之plugins] 写了一个检测游览器插件
检测IE插件 function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; }catch(ex){ return fal ...
- Android Service 启动流程
执行顺序 : startService -> bindService -> unbindService -> stopService 回调的结果为: 执行顺序 : startServ ...
- 中缀表达式转换为后缀表达式(python实现)
中缀表示式转换为后缀表达式 需要一个存放操作符的栈op_stack,输出结果的列表output 步骤: 从左到右遍历表达式: 1. 若是数字,直接加入到output 2. 若是操作符,比较该操作符和o ...
- YARN HA部署架构
hadoop001: zk rm(zkfc线程) nm hadoop002: zk rm(zkfc线程) nm hadoop003: zk nm RMStateStore: 存储在ZK的/rmstor ...
- 浅谈Django基础(HttpResponse、render、redirect)
1. 使用之前先导入他们 from django.shortcuts import HttpResponse, render, redirect 2. HttpResponse: 它是作用是内部传入一 ...
- June 09th, 2019. Week 24th, Sunday
The beauty you see in me is a reflection of you. 你在我身上看到的美,正是你的倒影. From Jalaluddin Rumi. What we see ...
- css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size
css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...
- 201871010102-常龙龙《面向对象程序设计(java)》第十六周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- AcWing 30. 正则表达式匹配 (剑指OFFER leetcode 10)
题目描述请实现一个函数用来匹配包括’.’和’*’的正则表达式. 模式中的字符’.’表示任意一个字符,而’*’表示它前面的字符可以出现任意次(含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式. ...