美文网首页
vue组件内数据与组件外的数据的双向绑定

vue组件内数据与组件外的数据的双向绑定

作者: saintkl | 来源:发表于2018-04-03 11:00 被阅读0次

在项目开发中遇到子组件向父组件传递数据报错的问题
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value
经搜索参考发现“组件内部自己变了告诉外部,外部决定要不要变”果然好用,遂纪录下来。
参考网页 vue组件内数据与组件外的数据的双向绑定

//子组件中添加watch监视自己是否改变并告诉外部;
 export default{
   props:['dialogFormVisible'],
   watch: {
          dialogFormVisible(val) {//父组通过props件传来的属性
            this.myFormVisible = val;
          },
          myFormVisible(val){//自己的属性*子组件要使用该属性,而不是父组件传来的属性
              this.$emit('addsubmit',val)//如果改变,通过addsubmit通知父组件
          }
        },
}
//父组通过监听addsubmit接收信息,通过changeFormvisible方法改变属性dialogFormVisible值;
 <Add :dialogFormVisible="dialogFormVisible" v-on:addsubmit="changeFormvisible" ></Add>
  export default{
    changeFormvisible(val){
       this.dialogFormVisible=val;//
   },
}

相关文章

  • Vue之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

  • vue组件内数据与组件外的数据的双向绑定

    在项目开发中遇到子组件向父组件传递数据报错的问题Avoid mutating a prop directly si...

  • vue常见面试题

    双向数据绑定的原理: vue父组件向子组件传值(属性绑定):传递数据(props): 传递方法(this.$emi...

  • vue

    vue三大特点 数据双向绑定 组件化 单文件组件-js/css/html存在于一个文件内(webpack+vue-...

  • 前端面试题:VUE

    1. vue的双向数据绑定实现原理? 2. vue如何在组件之间进行传值? 3. vuex和vue的双向数据绑定...

  • vue

    1、vue的双向数据绑定实现原理 2、vue如何在组件之间进行传值 3、vuex和vue的双向数据绑定有什么冲突 ...

  • angular2:数据绑定的基本概念

    前面有写到input的双向数据绑定,但除了双向数据绑定外,还存在单向数据绑定的概念,比如angular2:组件间的...

  • vue 父子组件通信

    vue设计模式是数据流在组件之间是单向流动,组件内部是数据双向绑定, 父组件一般会通过props绑定数据传递给子组...

  • Vue的特点

    vue两大特点:响应式编程、组件化。 vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、...

  • react受控组件与非受控组件

    受控组件(受数据控制) 非受控组件(操作dom) 数据的双向绑定

网友评论

      本文标题:vue组件内数据与组件外的数据的双向绑定

      本文链接:https://www.haomeiwen.com/subject/frjqhftx.html