vue父子组件之间传值

前端之家收集整理的这篇文章主要介绍了vue父子组件之间传值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  vue父子组件进行传值

  vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件。

 

  父组件向子组件传值

  下面用的script引入的方式,那种vue-cli搭建的同理

  父组件通过 v-bind:属性名(自定义的) = "要传递的数据"

  子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息

<span style="color: #008000;">/<span style="color: #008000;">
父组件向子组件发送消息
<span style="color: #008000;">
/<span style="color: #000000;">
Vue.component('mod'<span style="color: #000000;">,{
template:'

{{abc}} {{d}}
'<span style="color: #000000;">,props:['abc','d'<span style="color: #000000;">],data:<span style="color: #0000ff;">function<span style="color: #000000;"> () {
<span style="color: #0000ff;">return<span style="color: #000000;"> {

    }
}

});

<span style="color: #008000;">//<span style="color: #008000;"> 父组件向子组件传递数据

<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el:"#app"<span style="color: #000000;">,data:{
name:'123'<span style="color: #000000;">,title:'456'<span style="color: #000000;">
}
});

  

  子组件向父组件传值

  子组件向父组件传值时,子组件中 通过$.emit('自定义名字',‘要传递的数据’)

  父组件通过 v-on:子组件自定义的名字 = 函数  函数的arguments中就会接收到这个值

'wulv''
' 名称 后面所有的都是要传递的消息 .$emit('aabb','a','b','c'<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el:
'#app'<span style="color: #000000;">,methods:{
abc(){
console.log(arguments); // 这里的arguments就是传递过来的值
}
}
})

  父子组件传值非常简单,多用几次就可以学会了,在此作为笔记记录下来。

  

  如果你有幸看到我的文章学到了一点东西,我会非常高兴的。  

 

原文链接:https://www.f2er.com/nodejs/238723.html

猜你在找的Node.js相关文章