vue组件传值方式_vue中公共对象传值-CSDN博客

本文链接：https://blog.csdn.net/Z_qing_he/article/details/116989905

vue父组件向子组件传值

组件间数据不能共享因为vue组件不支持组件间的数据共享

父组件向子组件传值

1 在子组件的配置对象中写上props

{

props:[‘自定义名’]

}

2 直接把props里边自定义的名字当做data来进行使用

3 在父组件中找到子组件的标签在子组件标签上添加 v-bind:props自定义名字=“父组件要传递的data属性名”

<子组件标签 :props自定义名=“父组件data中要传递的属性名”></子组件名>

vue子组件向父组件传值

在vue中需要使用this.$emit触发事件

通过this.$on来监听事件改变

1 在子组件的模板对象中添加自定义点击事件

{

template:`

<button @click=“方法名”>触发

`

}

methods:{

方法名(){

this.$emit(‘自定义名称’,要发送的数据)

}

}

2 在父组件中找到子组件标签在子组件标签上使用v-on:自定义名称=‘新的方法名’

<子组件标签 @自定义名称=‘新的方法名’></子组件标签>

3 在父组件中使用自定义方法,来接收子组件传递过来的数据

methods:{

新的方法名(形参){

console.log(形参) // 形参指的就是子组件传递的数据

}

}

vue非父子组件之间传值

非父子组件传值
1 声明一个公共实例对象
const bus = new Vue()
2 在需要发送数据的组件中使用bus. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots bus.$ emit(‘自定义名字’,要发送的数据)
}
}
3 在需要接收数据的组件中使用 bus. $o n 监听数据的变化 b u s .$ on 是不能自动运行的所以我们需要写在声明周期里
钩子函数created()里边
created(){
bus.$on(‘自定义名字’,(data)=?{
console.log(data) // data指的就是发送的数据
})
}