在 Vue 组件中，我们可以定义私有属性，即只在组件内部使用的属性。例如：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
-- ----
------ -
--
--
--------- -
-- ----
-------- -
------ ---------- - --
--
-- ----
---------- -
------ ----------
-
-
--但是，使用 Vue 默认的编译器编译时，私有属性不会被编译成 JavaScript 对象的属性。这就导致了一些问题，比如不能够在引用该组件的父组件中访问私有属性。
为了解决这个问题，我们可以通过 Babel 构建工具来处理私有属性。
Babel 处理私有属性
Babel 是一个用于转换 JavaScript 代码的工具集。它可以将 ES6 语法转换成 ES5 语法，并支持各种插件扩展。其中，@babel/plugin-proposal-private-property-in-object 这个插件可以处理私有属性。
首先，安装 Babel：
npm install @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-private-property-in-object --save-dev
然后，在 .babelrc 文件中配置 Babel：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-private-property-in-object"]
}这里使用了 @babel/preset-env 预设，这个预设可以根据你的目标平台自动调整插件和 polyfill，并将你编写的代码转换成在该平台上运行的代码。
接下来，我们需要将 Babel 应用到 Vue 项目中。我们可以将 Babel 集成到 webpack 中，或者使用 Babel 单独编译单个文件。
这里以单独编译单个文件为例，假设我们有一个 Vue 组件文件 Component.vue，其中包含私有属性，代码如下：
-- -------------------- ---- -------
----------
-----
-- ----- --
-- ------ --
-- -------- --
------
-----------
--------
------ ------- -
------ -
------ -
------ -
--
--
--------- -
-------- -
------ ---------- - --
--
---------- -
------ ----------
-
-
--
---------我们可以在 package.json 中添加一个脚本来处理这个文件，代码如下：
{
"scripts": {
"babel": "babel Component.vue --out-file Component.js"
}
}运行 npm run babel 命令，Babel 将会处理 Component.vue 文件，并输出处理后的 Component.js 文件。
现在，我们可以在引用该组件的父组件中访问私有属性了：
-- -------------------- ---- -------
----------
-----
---------- ----------------------------
-- ------------------------ --
------
-----------
--------
------ --------- ---- -----------------
------ ------- -
----------- - --------- -
--
---------这里使用了 $refs 来获取子组件的实例，并访问私有属性 _private。
总结
通过 Babel 处理私有属性，可以避免因为 Vue 默认的编译器不处理私有属性而导致的问题。同时，Babel 可以依据我们的配置，将代码转换成符合我们要求的运行代码。我们可以根据项目需要，使用不同的集成方式来应用 Babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c31d3283d39b488170e5ad