精华内容
下载资源
问答
  • 子表单的由父组件传递过来,prop接受后为空,因为父组件中该默认为空,需要经过点击事件获取之后再传给子组件更新显示。 比如:当点击列表某行,弹出具有该行详情信息的对话框/列表(dialog)。而父组件初始...

    父子通信初始值为空,通过事件改变后怎么传给子组件

    场景:
    子表单的值由父组件传递过来,prop接受后为空,因为父组件中该值默认为空,需要经过点击事件获取值之后再传给子组件更新显示。
    比如:当点击列表某行,弹出具有该行详情信息的对话框/列表(dialog)。而父组件初始传递的值默认为空,需要当点击后再重新赋值传递。

    原因:从 props 的值传递给子组件,只有一次操作,就是在 mounted 中,往后即使 props的值发生了变化,子组件也接收不到。除非使用watch监听。注意:将传递过来的值再赋值给data中,在子组件中使用data的值。

    示例:(在element-ui组件库的使用情况下)
    父组件 (table属性不全,与本主题不相干的属性都删掉了)

    <!-- 通过点击更改对话框父组件的属性值,动态显示对话框 。 这里对话框的显示与隐藏不再赘述,详见另一篇。-->
    <el-table
        @cell-click='openTable'
    >
    </el-table>
    <!-- 对话框父组件,此时传递给子组件的rowDetails为空(data中定义为空),可以通过子组件的created进行查看 -->
    <Dialog :dialogFormVisible.sync='dialogFormVisible' :rowDetails='rowDetails'></Dialog>
    
    data(){
        // 
        return{
             rowDetails: ''
        }
    },
    // 此时通过点击事件,更改了rowDetails的值。(该点击事件获取了所点击行的信息)
    openTable(row) {
        this.dialogFormVisible = !this.dialogFormVisible;
        this.rowDetails = row.natural
    }
    

    子组件

    <el-form>
        <el-form-item label="spec">
            <el-input v-model="newObj.spec"></el-input>
        </el-form-item>
    </el-form>
    
    data() {
        return {
            newObj:{}
        }
    },
    props: ['rowDetails'],
    watch:{
        rowDetails(){
            this.newObj=this.rowDetails;
        }
    }
    
    展开全文
  • 如果一个组件通过props获得,怎么将赋给data呢? props: { info: { type: Array, default: function(e) { return {} }, }, 此时获得了info数组的内容,想要为data动态绑,需要用到watch: ...

    如果一个组件通过props获得值,怎么将值赋给data呢?

    	props: {
    	  info: {
    		type: Array,
    		default: function(e) {
    			return {}
    				},
    
    		},
    

    此时获得了info数组的内容,想要为data动态绑值,需要用到watch:

    	watch: {
    			info: function(newVal) {
    				this.name = newVal[0].name;
    				this.sex = newVal[0].name == 1 ? '先生' : '女士';
    				this.time = newVal[0].create_t ;
    			}
    		},
    

    此时data中的值就变成了从info中取得的值:

    	data() {
    			return {
    				name: '',
    				sex: '',
    				time:''
    			}
    		},
    
    展开全文
  • 使用redux更新store中的值,引起对应组件的update,在componentWillUpdate中,使用对应的props值时,发现并没有变化

    使用redux更新store中的值,引起对应组件的update,在componentWillUpdate中,使用对应的props值时,发现并没有变化, 在mapStateToProps中,打断点,state是已经变化了的,但是componentWillUpdate函数中确实还是之前的值,在render中打断点,又是已经变化了的,百度之后,发现在render时,才会把更新后的store值,赋给this.props;componentWillUpdate中this.props的值还是更新前的,如果要获取更新后的,componentWillUpdate、componentDidUpdate和shouldComponentUpdate一样,具有两个参数,nextProps,nextState,下一个要获取的值就在这里。

    展开全文
  • 今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props值报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在子组件中更新props中的属性,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model 一、.sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <...

    在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model

    一、.sync属性

    父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync
    父组件

    <template>
    <div id="app">
        // 注意点一、:show后跟修饰符.sync
        // 等同于<my-componen :show="valueChild" @update:show="val => valueChild= val" />
        <my-component :show.sync='valueChild' />
    </div>
    </template>
    <script>
    export default {
        data(): {
            return {valueChild: false}
        }
    }
    </script>
    

    子组件

    <template>
        <h3>{{show}}</h3>
        <button @click="eventOpt">子组件事件</button>
    </template>
    <script>
    export default {
       props: {
           show: { type: Boolean, default: false}
        } ,
        methods: {
            eventOpt() {
                // 注意二、事件名必须为update:属性名
                // 更改prop中的属性show的属性值,同时更新父组件中中valueChild的属性值
                 this.$emit('update:show', false);
            }
        }
    }
    </script>
    

    标题二、v-model应用

    子组件定义的属性名必须为 value
    父组件向上弹射事件给子组件时,事件名必须为 input

    父组件

    <template>
    <div id="app">
       // 等同于<my-componen :value="valueChild" @input="val => valueChild= val" />
        <my-component :value='valueChild' />
    </div>
    </template>
    <script>
    export default {
        data(): {
            return {valueChild: false}
        }
    }
    </script>
    

    子组件

    <template>
        <h3>{{show}}</h3>
        <button @click="eventOpt">子组件事件</button>
    </template>
    <script>
    export default {
       props: {
         // 注意点一、属性名必须为value
          value: { type: Boolean, default: false}
        } ,
        methods: {
            eventOpt() {
                // 注意二、事件名必须为input
                // 更改prop中的属性show的属性值,同时更新父组件中中valueChild的属性值
                 this.$emit('input', false);
            }
        }
    }
    </script>
    

    比较
    v-model 子组件只能更改props中的一个属性值value;
    .sync 子组件可以更改props中的多个属性值;

    展开全文
  • 使用vue、uni-app开发小程序时,新闻列表做成了一个组件,组件中根据props传入的type调用请求,查询展示对应类型的新闻列表,但总是获取不到。 分析: 经过排查,发现由于page中的type是通过ajax异步获取到的,...
  • 最近在学习使用Redux,使用的过程中发现reducer设置新状态后,组件connect的props并没有发生变化,即一直保持第一次的。查找资料后发现是我的reducer写法有误。 之前的写法: let newState = null switch ...
  • 基于 props 更新 state

    2020-05-23 12:54:18
    额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的。这意味着你不应该在一个子组件内部改变 prop。 Props 的只读性 决不能修改自身的 props。所有组件都必须保护它们的 props 不被更改。 ...
  • prop 作为初始传入后,子组件想把它当作局部数据来用; prop 作为初始传入,由子组件处理成其它数据输出。 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的初始化它: props: ['...
  • 问题: 父组件props传值给子组件,子组件在created中获取不到传过来的 关于props传值,这里不赘述直接看官网:https://cn.vuejs.org/v2/guide/components-props.html 分析:因为父组件props传给子组件的是通过...
  • Vue 子组件修改父组件props值 wangEditor

    千次阅读 2019-03-30 08:59:58
    首先说点题外话,子组件修改父组件的,这个内容很多人都写过,但是很大一部分是基于 Vue2.0 写的,需要在父组件中专门定义一个方法/函数,很是麻烦。今天仔仔细细把官方文档看了一下,有了今天这篇博客。 首先这...
  • 通过react-redux和redux实现react组件之间的通信,reducer、action、store都编写正确,mapDispatchToProps也能正确传值.唯独mapStateToProps的return...本来的需求是登陆成功组件获得新的props,随之更新img和div内...
  • 1、watch深度监听 watch主要用于监听页面的变化,watch前后(newValue和oldValue)一样的情况下,app监听不会被调用,... // newVal 获取props中的,方法名 = props中的参数 isTag(newVal, oldVal) { t
  • 父子组件通过 props 传值,当所传值需要异步请求获取时,子组件在挂载完成阶段(mounted),拿不到props值 具体实例描述 父组件: &lt;template&gt; &lt;div&gt; &lt;son :father-data="...
  • 获取不到props中的

    2020-05-13 10:27:33
    那么造成props中某个属性获取不到的原因可能是,父组件传入的值是异步请求得到的值,使得子组件创建完成后值才传进来,那么就造成在created跟mounted钩子中获取不到props值的情况。 解决方法: 1.使用watch监听数据...
  • error: Unexpected mutation of "、、、" prop vue/no-mutating-props
  • 子组件将props存放到...props更新不会修改state中的, (页面数据不会发生变化!!!)、 如果需要时时更新页面数据的话 1 直接使用this.props.xx 但是当前需要处理,必须放到state中就没办法了 2 在 ...
  • dva中数据与props更新时机 //第一种写法【存在问题】 const demo (props)=>{ const tagPage = props.match.params.tagPage;// 直接从props中拿去路由上的参数 const { detail } = model// 从dva中取数据 ...
  • 更新原因:从 props 的 info 传递给 data 的 list ,只有一次操作,就是在 mounted 中,往后即使 props 的 info 发生了变化,data 也接收不到 解决: (推荐):computed 重新计算属性 赋值到子组件 watch 监听props...
  • 问题 设计vue组件时,常常有这样一个应用场景:父组件通过接口请求回来的数据传给子组件, ...这样会有一个问题,就是组件接受到的props是有的,但是赋给data里面的变量却是空的。 子组件 props: { title: {...
  • props传值,第一次更新watch监听到
  • 在componentWillReceiveProps内重新为子组件的变量赋值
  • props改变子组件不更新

    千次阅读 2020-03-14 21:07:32
    就是修改了父组件传递给子组件的值,但是子组件接收父组件的props值的时候竟然没有更新视图。举例代码如下: 组件代码 <template> <h1>{{ showData }}</h1> </template> <script> ...
  • 很多情况下,我们更需要传入子组件 props(也就是父组件中的)是一个双向的,也就是说子组件更改时,父组件也伴随更改。 特别是当子组件使用了某些第三方 UI 组件库的时候,在子组件内进行了 v-model 双向...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,241
精华内容 17,296
关键字:

props值更新