如何在Svelte构造函数中实现类似bind:prop的双向绑定功能

方法一：监听Svelte内置的属性变化事件 #

Svelte组件内部修改导出的prop时，会自动派发{propName}:change格式的事件，直接用组件实例的$on方法监听这个事件，就能同步外部变量：

let parentText = "";
const component = new MyInput({
  props: { text: parentText },
  target: el,
});

// 监听text的变化，同步到parentText
component.$on('text:change', (event) => {
  parentText = event.detail;
});

// 要主动更新组件的text值，用$set方法就行
// component.$set({ text: '新输入值' });

这其实就是Svelte组件内双向绑定的底层逻辑——prop传值加事件触发，完全原生支持，不需要修改组件代码。

方法二：封装类似$watch的监听函数 #

如果需要更通用的监听逻辑，像组件内部的$watch那样，可以自己封装一个函数，利用组件的update事件（每次组件更新都会触发）来检测prop变化：

function watchComponentProp(component, propName, callback) {
  let currentValue = component.$props[propName];
  // 监听组件更新事件
  const unsubscribe = component.$on('update', () => {
    const newValue = component.$props[propName];
    if (newValue !== currentValue) {
      callback(newValue, currentValue);
      currentValue = newValue;
    }
  });
  // 返回取消监听的函数，不用的时候可以调用
  return unsubscribe;
}

// 使用示例
let parentText = "";
const component = new MyInput({
  props: { text: parentText },
  target: el,
});

// 监听text属性的变化
const unsubscribe = watchComponentProp(component, 'text', (newVal, oldVal) => {
  parentText = newVal;
  console.log(`text从${oldVal}变成了${newVal}`);
});

// 不需要监听时执行
// unsubscribe();

相关社区讨论说明 #

• 社区一直有需求，希望官方给组件实例加个原生的$watch方法，和组件内部的语法统一，简化原生JS场景下的监听操作。
• 核心团队讨论的重点是：要不要把组件内部的$watch能力暴露给外部实例，还是靠完善事件系统来覆盖这类场景。目前官方还没推出原生的实例$watch方法，推荐优先用[prop]:change事件的方案。
• 也有社区方案用Svelte的store来做跨环境状态同步，但对于简单的组件双向绑定，事件监听已经足够轻便。

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