若依框架(不分离板)———开发笔记

一、表格内图片预览效果
显示图片而非地址

{
     field: 'asCover',
     title: '封面',
     formatter: function(value, row, index) {
        return $.table.imageView(value,400,400);
      }
 },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在若依框架的不分离版本中,可以使用props或vuex来进行组件之间的传值。 1. 使用props传值: 在父组件中使用props向子组件传递数据,子组件通过props接收数据。 ```html <!-- 父组件 --> <template> <div> <child-component :message="msg"></child-component> </div> </template> <script> import ChildComponent from '@/components/ChildComponent.vue'; export default{ components:{ ChildComponent }, data(){ return{ msg: 'Hello World!' } } } </script> <!-- 子组件 --> <template> <div> {{ message }} </div> </template> <script> export default{ name: 'ChildComponent', props: { message: String } } </script> ``` 2. 使用vuex传值: 在vuex中定义一个全局状态,不同组件可以通过mutations和actions来修改和获取该状态的值。 ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { msg: 'Hello World!' }, mutations: { updateMsg(state, payload){ state.msg = payload; } }, actions: { updateMsg({ commit }, payload){ commit('updateMsg', payload); } }, getters: { getMsg: state => state.msg } }); export default store; ``` 在组件中可以通过`this.$store.state`来获取状态值,通过`this.$store.commit()`来调用mutations修改状态值,通过`this.$store.dispatch()`来调用actions修改状态值。 ```html <!-- 父组件 --> <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from '@/components/ChildComponent.vue'; export default{ components:{ ChildComponent }, methods:{ updateMsg(){ this.$store.commit('updateMsg', 'Hello Vuex!'); } } } </script> <!-- 子组件 --> <template> <div> {{ message }} </div> </template> <script> export default{ name: 'ChildComponent', computed: { message(){ return this.$store.getters.getMsg; } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值