使用Vue.js中的插槽更改组件中的变量后更新外部全局变量/全局vs.局部vs.组件变量

时间:2020-01-16 21:42:16

标签: vue.js vuejs-slots v-slot

通过替换{{ '',(is_checked = is_checked_2) }}是否有更好的方法来实现相同目的?

问题在于变量 is_checked_2 是局部变量,仅在<div v-slot="{ is_checked_2 }"></div>的子节点中定义,并且目前无法通过作用域插槽将其设置为全局变量。

HTML代码:

<div id="app">
    <comp :is_checked="is_checked" v-slot="{ is_checked_2 }">
        {{ '',(is_checked = is_checked_2) }}
        <p>is_checked_2 = {{ is_checked_2 }} (local value)</p>
    </comp>
    <p>is_checked = {{ is_checked }} (global value)</p>
    <p>is_checked_2 = {{ is_checked_2 }} (global value)</p>
</div>

<script src="app.js"></script>

app.js

Vue.component("comp", {
  template: `
<div>
    <input type="checkbox" :checked="is_checked" v-model="is_checked">
    <p>is_checked = {{  is_checked }} (in component)</p>
    <slot :is_checked_2="is_checked"></slot>
</div>
`,
  props: ["is_checked"],
});

new Vue({
  el: "#app",
  data: function() {
    return { is_checked: true, is_checked_2: false };
  }
});

0 个答案:

没有答案
相关问题