vue组件之间ref传值和bus总线传值

最新推荐文章于 2023-08-02 11:03:35 发布

一只小虾米~~

最新推荐文章于 2023-08-02 11:03:35 发布

阅读量363

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43930256/article/details/128000449

版权

本文介绍了在Vue中如何使用ref属性和bus总线进行组件间的值传递。通过设置ref属性实现直接通信，利用bus对象实现跨级组件的事件监听和传递。总结指出，在值传递层次较少时，ref方式简洁；而在层次复杂时，bus方式更为直观。

摘要由CSDN通过智能技术生成

1、准备：页面引入vue，写渲染区域，实例化一个vue

2、写两个组件，并在渲染区域引用。

// 父组件
    Vue.component("my-parent", {
        data() {
            return {
                msg: "父亲的房子",
                car:''
            }
        },
        template: `
        <div>
                    <fieldset>
                        <legend>父亲组件</legend>
                        <div>{
  {msg}}  {
  {car}}
                            <button >父亲按钮</button>
                            </div>
                    </fieldset>
                </div>`,
        
    })
    // 母亲组件
    Vue.component("my-mother", {
        data() {
            return {
                msg: "母亲的汽车",
                house:''
            }
        },
        template: `
        <div>
                    <fieldset>