Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
2017-06-16 01:02
1281 查看
Vue.js父与子组件之间传参
父向子组件传参
例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。
App.vue中
componentA.vue中
父向子组件传参(.$broadcast)
用法:vm.$broadcast( event, […args] )广播事件,通知给当前实例的全部后代。因为后代有多个枝杈,事件将沿着各“路径”通知。例子:父组件App.vue中
<input>绑定了键盘事件,回车触发addNew方法,广播事件”onAddnew”,并传参this.items。子组件componentA中,注册”onAddnew”事件,打印收到的参数items。
App.vue中
<div id="app"> <input v-model="newItem" @keyup.enter="addNew"/> </div>
import componentA from './components/componentA' export default { new Vue({ methods: { addNew: function() { this.$broadcast('onAddnew', this.items) } } }) }
componentA.vue中
子组件向父传参(.$emit)
用法:vm.$emit( event, […args] ),触发当前实例上的事件。附加参数都会传给监听器回调。例子:App.vue中component-a绑定了自定义事件”child-say”。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords,显示在
<p>标签中。
App.vue中
<p>Do you like me? {{childWords}}</p> <component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
import componentA from './components/componentA' export default { new Vue({ data: function () { return { childWords: "" } }, components: { componentA }, methods: { listenToMyBoy: function (msg){ this.childWords = msg } } }) }
componentA.vue中
<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA' export default { data: function () { return { msg: 'I like you!' } }, methods: { onClickMe: function(){ this.$emit('child-say',this.msg); } } }
子组件向父传参(.$dispatch)
用法:vm.$dispatch( event, […args] ),派发事件,首先在实例上触发它,然后沿着父链向上冒泡在触发一个监听器后停止。例子:App.vue中events中注册”child-say”事件。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords,显示在
<p>标签中。
App.vue中
<p>Do you like me? {{childWords}}</p> <component-a msgfromfa="(Just Say U Love Me)"></component-a>
import componentA from './components/componentA' export default { new Vue({ events: { 'child-say' : function(msg){ this.childWords = msg } } }) }
componentA.vue中
<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA' export default { data: function () { return { msg: 'I like you!' } }, methods: { onClickMe: function(){ this.$dispatch('child-say',this.msg); } } }
相关文章推荐
- vue.js使用props在父子组件之间传参
- vue.js 利用组件之间通讯,写一个弹出框例子
- EL使用例子(与输入有关的隐含对象:param,paramValues)(注意:引入的标签)
- vue.js使用props在父子组件之间传参
- vue通过写引入完整js的方式在HTML上的组件写法
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
- vue.js,table标签(表格)使用过度transition组件出错
- 使用iframe标签,子窗体与父窗体之间相互调用js函数
- IOS之URL Scheme的使用(可以在app之间调用传递数据)
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 s
- IOS之URL Scheme的使用(可以在app之间调用传递数据)
- 一个App架构例子分析--UI层使用MVP模式;各层之间使用Otto实现通信
- phoenix使用vue--单独js(不使用app.js)
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 s
- 使用微信公众平台JS-SDK开发时,注意下面四点可以少踩坑
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT 'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用
- Angular JS ng-app使用的注意事项
- 在js中居然是可以使用c标签的
- js:在<script></script>中使用的属性,可以使标签对里的内容当成文本
- SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 sp_co