实例一:

<div id="app">
<alert msg="hhhhhhh"></alert>
</div>
Vue.component('alert', {
template: '<button @click="on_click">点击</button>',
props: ['msg'],
methods: {
on_click: function(){
alert(this.msg);
}
}
})
new Vue({
el: '#app'
})

实例二:

<div id="app">
<user username="samve"></user>
</div>
Vue.component('user', {
template: `
<a :href="'user/' + username">{{username}}</a>
`,
props: ['username']
}) new Vue({
el: '#app'
})

vue中组件通信之父子通信:props(组件传参)的更多相关文章

  1. angular组件间的通信(父子、不同组件的数据、方法的传递和调用)

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  2. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. vue 通信:父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  4. 在vue中使用setter改写父子组件传的值

    概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...

  5. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  6. Vue 中使用 extent 开发loading等全局 组件

    Vue 中使用 extend 开发组件 简介:再开发过程中那面会遇到自定义 loading alert 等全局组件,这里我们可以使用 vue 中的extend 来帮助我们完成 一个简单extend例子 ...

  7. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  8. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  9. vue项目获取当前地址栏参数(非路由传参)

    项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入 管理系统:打开新地址地址 let obj = { id: 21, ...

  10. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

随机推荐

  1. shell 变量的数值计算实践 expr

    expr(evaluate(求值)expressions(表达式))命令既可以用于整数运算,也可以用于相关字符串长度.匹配等的运算处理 expr 用做计算 必须有一个空格才会计算 [root@salt ...

  2. MHA 实现VIP切换用到脚本

    在MHA Manager端配置中,如果实现MHA的vip故障切换需要在配置文件/etc/masterha/app1/app1.cnf 中启用下面三个参数: master_ip_failover_scr ...

  3. python的执行顺序

    为了区分是主动执行(如python test.py)还是被动调用(如import test),python用__name__来进行标识. 当主动执行时,__name__为__main__,当被调用时, ...

  4. 添加了unimportant 之后,需要调整的参数

    count = count1+count2-count_unimportant_union*10 这个10需要调参.因为我们TOPN取的是10,所以如果两个词完全相同,正常情况下会有22个非0值.( ...

  5. Python实现文字聊天室

    你是否想过用所学的Python开发一个图形界面的聊天室程序啊? 像这样的: 如果你想开发这样一个有点怀旧风格的聊天程序,那么可以接着看: 要开发这个聊天程序,你需要具备以下知识点: asyncore ...

  6. zyb的面试(广工14届比赛)

    这道题目在上半年ZOJ模拟上年青岛赛区ACM题的时候就已经出现了.当时我不会写,本来想着赛后补题的最后因为懒惰又没补. 现在这道题又出现了.这是上天对我的惩罚啊!!! 所以这次铁了心也要补这题.然后我 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限及操作指引

    系列目录 1.权限包括菜单权限,按钮权限,数据权限 2.角色组和用户之间是多对多的关系,即多个用户可以拥有多个角色组,权限是拥有角色组的并集 1.菜单界面,菜单都是动态数据由模块管理进行设置 2.权限 ...

  8. 使用Eclipse出现make: *** No rule to make target `all'. Stop.解决办法

    在mac下用eclipse开发jni 总是出现如题所示的异常,后来将build command 改成ndk-build就可以了 具体如图所示  输出内容 **** Build of configura ...

  9. 32.js 判断当前页面是否被浏览

    可以通过document.hidden属性判断当前页面是否是激活状态. 兼容性:IE10+,Firefox10+,Chrome14+,Opera12.1+,Safari7.1+ 兼容性写法示例: va ...

  10. InstallShield2015制作安装包----------安装过程中修改文件内容

    //修改安装目录下autostart.vbs里的路径 //打开文件 OpenFileMode(FILE_MODE_NORMAL); strPath=INSTALLDIR+"centerAut ...