Vue.js Vuejs 使用 vif 切换的保持活动组件

发布于01月21日

问题

我有一个子组件，它可能存在于页面上，也可能不存在.当用户单击其他内容时，try 将其缓存，这样无论我如何try 使用<keep-alive>缓存，当用户返回时，搜索词和其他内容都不会再次显示.

我试过的

documentation似乎表明我所需要做的就是将我的组件包装在<keep-alive>标签中，这样就可以正常工作了.我试着匹配一些使用<component>标签的文档，但显然不起作用.我也试过使用includeprops ，因为仅仅包装它不起作用.

Vue.component('child', {
  template: '<div>child: {{text}}<div>',
  data() {return {text: ""}},
  created(){
    this.$nextTick(() => {
      this.text = `${Math.round(Math.random() * 100)}`
  })
},
  activated: function() {
    this.$nextTick(() => {
    	console.log('in activated');
    });
  }
})

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      showNow:false,
      message: 'This is a test.'
    }
  },
  methods: {
    changeText: function() {
      this.message = 'changed';
    },
    toggle() {
      this.showNow = !this.showNow
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <keep-alive include="child">
    <div v-if="showNow">
        <h4>Title of section to be toggled</h4>
        <component is="child"></component>
    </div>
  </keep-alive>
  
  <button @click="toggle()">toggle child</button>
</div>

我也try 过不使用include，只是像so <keep-alive><child></child></keep-alive>那样包装，或者使用<component>语法，这两种方法都不管用.

如果移除条件渲染，将调用activated钩子，但这显然违背了<keep-alive>的目的！就目前而言，这个钩子从未被调用，这令人沮丧.

此外，文档中的the example也没有帮助，因为它们没有使用v-if，只是更改了通过字符串呈现的组件....

另外，除了Vue，我不知道如何给它贴标签.js

Vue.component('child', { template: '<div>child: {{text}}</div>', data() {return {text: ""}}, created(){ console.log('in created') this.$nextTick(() => { this.text = `${Math.round(Math.random() * 100)}` }) }, activated: function() { this.$nextTick(() => { console.log('in activated'); }); } }) var vm = new Vue({ el: '#app', data: function() { return { showNow:false, message: 'This is a test.' } }, methods: { changeText: function() { this.message = 'changed'; }, toggle() { this.showNow = !this.showNow } }, });

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> <div id="app"> <keep-alive> <child v-if="showNow"></child> </keep-alive> <button @click="toggle()">toggle child</button> </div>

Vue.js Vuejs 使用 vif 切换的保持活动组件

问题

我试过的

推荐答案

Vue.js相关问答推荐

Vue CDN的html工作，但v—如果不工作

无法从CDN使用Vue和PrimeVue呈现DataTable

Vue3外部数组的响应性

在重复内容区域中添加

在textbox文本框 VueJS 2 中键入时搜索列表

在基于 TypeScript 的 Vue 中将 vuex 状态和Mutations绑定到复选框组件属性

如何为 Vue 项目设置 lint-staged？

如何使用 vue-resource 添加额外的标头来发布请求？

Vuejs 2，VUEX，编辑数据时的数据绑定

SassError：媒体查询表达式必须以(开头

Vue 3：模块 '"../../node_modules/vue/dist/vue"' 提示

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要？

异步方法不等待函数

重新加载页面正在 vue 组件中的插槽上闪烁内容

异步api调用后如何使用vuex getter

在vue中单击时如何模糊元素

如何设置：id 前缀字符串？

是否有 v-cloak 逆？

Vuex Mutation 正在运行，但组件在 vue 开发工具中手动提交之前不会更新

表格行上的 Vuejs 转换