如何实现Composer包数据传递至前端NPM Vue包？

不需要复杂的API，以下几种轻量方案完全满足需求：

1. 内联JSON到DOM元素（最直接） #

在Composer包提供的WordPress区块模板中，把ACF获取的数据通过DOM的data-*属性输出，Vue包直接读取这些数据。

后端（Composer包的PHP模板） #

<?php
// 从ACF获取并整理数据
$photo_player_data = [
    'gallery' => get_field('photo_gallery'),
    'autoplay' => get_field('autoplay_enabled'),
    'speed' => get_field('transition_speed')
];
?>

<!-- Vue挂载容器，用data属性存储JSON数据 -->
<div id="photo-player-container" data-player-data='<?php echo wp_json_encode($photo_player_data); ?>'></div>

用wp_json_encode代替原生json_encode，它会自动处理WordPress中的特殊字符转义，避免XSS风险。

前端（Vue NPM包） #

在Vue组件中读取DOM属性：

export default {
  data() {
    return {
      playerConfig: null
    };
  },
  mounted() {
    const container = document.getElementById('photo-player-container');
    // 解析data属性中的JSON数据
    this.playerConfig = JSON.parse(container.dataset.playerData);
  }
};

2. 利用WordPress的wp_localize_script传递数据 #

如果你的Vue包是通过WordPress的脚本注册机制加载的，可以用wp_localize_script把数据绑定到脚本上，减少全局变量污染。

后端（Composer包的PHP逻辑） #

<?php
// 注册Vue包的构建脚本（假设脚本在Composer包的assets目录）
wp_register_script(
    'photo-player-vue',
    trailingslashit(plugin_dir_url(__FILE__)) . 'assets/photo-player.min.js',
    [], // 若Vue是全局依赖，可在此添加'vue'
    '1.0.0',
    true // 在页脚加载
);

// 将ACF数据传递到脚本
wp_localize_script('photo-player-vue', 'PhotoPlayerConfig', [
    'data' => $photo_player_data
]);

// 入队脚本
wp_enqueue_script('photo-player-vue');

前端（Vue NPM包） #

直接访问绑定的全局对象：

export default {
  data() {
    return {
      playerConfig: window.PhotoPlayerConfig.data
    };
  }
};

3. ACF Gutenberg区块属性传递（针对区块场景） #

如果你的photoplayer是ACF Gutenberg区块，可以在区块渲染回调中把数据作为属性传递：

<?php
// ACF区块渲染回调
function render_photo_player_block($block, $content = '', $is_preview = false) {
    $data = get_field('player_data');
    echo '<div id="photo-player" data-block-data="' . wp_json_encode($data) . '"></div>';
}

前端读取方式和方案1一致。

关键注意事项 #

• 命名隔离：全局变量或data-*属性使用独特命名（如PhotoPlayerConfig），避免与其他插件冲突。
• Peer Dependency配置：确保你的Vue NPM包在package.json中正确声明Vue为peer依赖，让用户项目自行管理Vue版本，规避单例问题：

  "peerDependencies": {
    "vue": "^3.0.0"
  }
  

内容的提问来源于stack exchange，提问作者Keygun2k1