父子组件之间传值

 <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-父组件和路由的更多相关文章

  1. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  2. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  3. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  4. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  5. Vue 父组件传值到子组件

    vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接  msg="xxx"就好 这里动态取值的话就  :msg=xxxxx ________ ...

  6. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  7. vue父组件引用子组件方法显示undefined问题原因及解决方法

    关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...

  8. vue 父组件与子组件的三生三世

    父组件和子组件相互传值:https://www.cnblogs.com/cxscode/p/11187989.html vue父组件触发子组件方法:https://www.cnblogs.com/cx ...

  9. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  10. 记录21.07.24 —— Vue的组件与路由

    VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...

随机推荐

  1. RabbitMQ的高级特性概念理解

    1.RabbitMQ中的消息如何保障百分之百的投递成功? 答:百分之百的投递成功,方案可以参考下面的2.3. 2.什么是生产者端的可靠性投递? 答:第一步,生产者保障消息的成功发出.第二步,保障Rab ...

  2. [browser navigator 之plugins] 写了一个检测游览器插件

    检测IE插件 function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; }catch(ex){ return fal ...

  3. Android Service 启动流程

    执行顺序 : startService -> bindService -> unbindService -> stopService 回调的结果为: 执行顺序 : startServ ...

  4. 中缀表达式转换为后缀表达式(python实现)

    中缀表示式转换为后缀表达式 需要一个存放操作符的栈op_stack,输出结果的列表output 步骤: 从左到右遍历表达式: 1. 若是数字,直接加入到output 2. 若是操作符,比较该操作符和o ...

  5. YARN HA部署架构

    hadoop001: zk rm(zkfc线程) nm hadoop002: zk rm(zkfc线程) nm hadoop003: zk nm RMStateStore: 存储在ZK的/rmstor ...

  6. 浅谈Django基础(HttpResponse、render、redirect)

    1. 使用之前先导入他们 from django.shortcuts import HttpResponse, render, redirect 2. HttpResponse: 它是作用是内部传入一 ...

  7. June 09th, 2019. Week 24th, Sunday

    The beauty you see in me is a reflection of you. 你在我身上看到的美,正是你的倒影. From Jalaluddin Rumi. What we see ...

  8. css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

    css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...

  9. 201871010102-常龙龙《面向对象程序设计(java)》第十六周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  10. AcWing 30. 正则表达式匹配 (剑指OFFER leetcode 10)

    题目描述请实现一个函数用来匹配包括’.’和’*’的正则表达式. 模式中的字符’.’表示任意一个字符,而’*’表示它前面的字符可以出现任意次(含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式. ...