道具参数在设置中没有反应

Posted 2023-02-22

【中文标题】道具参数在设置中没有反应

【英文标题】：Props arguments are not reactive in setup

【发布时间】：2021-11-30 05:58:03

【问题描述】：

我正在尝试开发一个编译给定 html 的组件；我成功地使用了恒定的 html 文本，但我无法通过更改 html 文本来完成这项工作。

ma​​in.js

app.component("dyno-html", 
  props: ["htmlTxt"],
  setup(props) 
    watchEffect(() => 
      console.log(`htmlText is: ` + props.htmlTxt);
      return compile(props.htmlTxt);
    );
    return compile(props.htmlTxt);
  ,
);

Home.js

<template>
  <div class="home">
    <dyno-html
      :htmlTxt="html2"
      :bound="myBoundVar"
      @buttonclick="onClick"
    ></dyno-html>
    -------------
    <dyno-html
      :htmlTxt="html"
      :bound="myBoundVar"
      @buttonclick="onClick"
    ></dyno-html>
  </div>
</template>

<script>
export default 
  name: "Home",
  components: ,
  data: function() 
    return 
      html: "",
      html2: `<div> Static! <button @click="$emit('buttonclick', $event)">CLICK ME</button></div>`
    ;
  ,
  mounted() 
    // get the html from somewhere...
    setTimeout(() => 
      this.html = `
        <div>
          Dynamic!
          <button @click="$emit('buttonclick', $event)">CLICK ME</button>
        </div>
      `;
    , 1000);
  ,
  methods: 
    onClick(ev) 
      console.log(ev);
      console.log("You clicked me!");
      this.html2 = "<b>Bye Bye!</b>";
    ,
  ,
;
</script>

结果：

控制台：

htmlText的变化好像到了setup函数，但不影响compile函数！

【参考方案1】：

这是预期的行为，因为 prop 值被读取一次并导致静态渲染函数。

属性值应该在渲染函数中读取。它可以用计算来包装以避免不必要的编译器调用：

const textCompRef = computed(() => ( render: compile(props.htmlTxt) ));
return () => h(textCompRef.value);

【讨论】：

谢谢！这正是我想要的！你知道我如何以嵌套方式使用它吗？ (***.com/questions/69539202)