vue3变量传递

组件间传递变量的方式

1. 全局变量

• 声明一个全局变量

// 声明全局变量
export const document_refs = [];

// 声明全局函数
export function add_document(doc) {

}

• 引入全局变量

// 头文件引入
import {document_refs} from './globalVar.js'
// 使用globalProperties注入全局变量
const app = createApp(App)
app.config.globalProperties.$document_refs = document_refs;
app.mount('#app')

• 组件内部使用

声明一个局部变量

<script>
export default {
  name: 'XXX',
  components: {
  }, 
  data() {
    return {
      local_refs: null,
  };
},
created() {
    // 将全局变量赋值给局部数据
    this.local_refs = this.$document_refs;
  },
methods: {
  deleteLink(index, linkIndex) {
    if (this.local_refs[index].links.length > 0){
      this.local_refs[index].links.splice(linkIndex,1)
        if (this.local_refs[index].links.length === 0){
          this.local_refs.splice(index,1)
        }
      }
      // console.log("deleteLink: "+index+" "+linkIndex, this.$document_refs);
  }
},
}
</script>

2. 父子组件通信

常用的组件通讯方式，一般是使用父子组件通讯方式。可以使用vue3的pros和emit进行通信。

父组件向子组件传递数据

如果子组件只需要监听父组件传递过来的数据，不需要修改并反馈回给父组件。那么可以使用props进行传递。

2.1 父组件声明一个变量，然后传递给子组件

<template>
  <div>
  <!-- 声明一个传递参数名，比如：pass_name 用':pass_name' 表示。 然后传递父组件的变量引用-->
    <ChildComponent :pass_name="parent_var"></MainBody>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    ChildComponent,
  },
  data() {
    return {
      parent_var: [],  // 父组件传递给子组件的数据
    };
  }
}
</script>

2.2 子组件接收父组件传递过来的数据

<template>
  <div>
      <div v-show="pass_name.length !== 0">父组件的决定我要不要显示 </div>
  </div>
</template>
<script>
export default {
    pros: {  // 用pros 表面这些属性是父组件传递过来的。
        pass_name: Array,  // 表面父组件有一个属性叫做pass_name,类型是数组
    }
}
</script>

子组件接收父组件传递的数据，并修改后反馈给父组件

如果我们除了使用父组件传递过来的数据，还需要修改后反馈给父组件。那么可以使用emit进行通信。

前面我们已经实现了父组件向子组件传递数据，但由于props是单向传递的，并不支持子组件修改后反馈给父组件。所以我们需要使用emit进行通信。

首先、我们还是需要实现2.1和2.2的传递方式。接下来，我们实现子组件更新父组件数据的方式：

2.3 声明一个更新方法，用于接受通知，并更新父组件的数据

//声明一个更新方法：
<script>
export default {
  name: 'App',
  components: {
    ChildComponent,
  },
  data() {
    return {
      parent_var: [],  // 父组件传递给子组件的数据
    };
  },
  methods: {
    update_parent_var(new_data) {
        this.parent_var = new_data;
  }
}
</script>

// 给子组件绑定一个事件，用于接收子组件传递过来的数据
// update_var是子组件抛出通知的名称，update_parent_var 表示接收到这个通知后，执行的方法名
<template>
  <div>
  <!-- 声明一个传递参数名，比如：pass_name 用':pass_name' 表示。 然后传递父组件的变量引用-->
    <ChildComponent :pass_name="parent_var" @update_var="update_parent_var"></MainBody>
  </div>
</template>

2.4 子组件更新数据，并抛出通知给父组件

前面说了子组件对于prop是只读左右，所以我们想更新值。需要本地创建一个变量副本，更新完成后在抛出通知给父组件

// 声明一个变量副本，并且引用prop对象
// 声明一个更新副本的方法，在收到操作后更新副本.
// 同时抛出update_var通知,这个通知携带一个更新值：this.local_pass_name
export default {
    pros: {  // 用pros 表面这些属性是父组件传递过来的。
        pass_name: Array,  // 表面父组件有一个属性叫做pass_name,类型是数组
    }
    data() {
        return {
        local_pass_name:this.pass_name,
        };
    },
    methods: {
        deleteLink(index) {
            // console.log(index, linkIndex)
            this.local_pass_name.splice(index,1)
            // 触发事件，将更新后的数据传递给父组件
            this.$emit('update_var', this.local_pass_name);
        }
    }
},
}
</script>


// 执行更新操作
<template>
  <div>
      <div v-show="pass_name.length !== 0">父组件的决定我要不要显示 </div>
      <button @click="deleteLink(1)">删除</button>
  </div>
</template>