Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
来源:互联网 发布:移动金融的软件 编辑:程序博客网 时间:2024/06/05 08:57
Vue.js父与子组件之间传参
父向子组件传参
例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>
标签中。
App.vue中
1<component-a msgfromfa=
"(Just Say U Love Me)"
></component-a>
mport componentA
from
'./components/componentA'
export
default
{
new
Vue({
components: {
componentA
}
})
}
componentA.vue中
<p>{{ msgfromfa }}</p>
export
default
{
props: [
'msgfromfa'
]
}
父向子组件传参(.$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中
import componentA
from
'./components/componentA'
export
default
{
events: {
'onAddnew'
: function(items){
console.log(items)
}
}
}
子组件向父传参(.$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父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
- VUE 父组件向子组件传值,子组件向父组件传值
- vue-prop父组件向子组件进行传值
- vue-子组件向父组件传值
- vue子组件向父组件传值问题
- 父组件向子组件传递数据(vue.js)
- Vue中父组件向子组件通信
- Vue.js组件—父组件与子组件之间的数据联系
- Vue 父组件与子组件之间的通信
- Vue 父组件与子组件
- EasyDSS流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- Vue之父组件向子组件传递数据
- vue父组件向子组件传递多个数据
- vue 子组件向父组件发送数据
- vue-cli 父组件向子组件传递参数2
- vue 子组件向父组件传递数据
- vue自定义事件 子组件向父组件通信
- 用户常用命令
- 名企笔试:网易2017招聘笔试题(工作安排)
- css中的表格---lesson9
- JQ定时器复-- 不懂--感觉没多大用处
- 文章标题
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
- Binder服务线程分析
- C语言基础之链表
- Thinking
- substr()、compare()、string中的find()函数、
- 8.Nginx 例子
- js操作表格目的隔行换色
- Less 入门-函数列表(转载)
- Python内置方法1