精华内容
下载资源
问答
  • 2021-08-14 22:34:16

    创建后created 发送请求,获取数据,点击取消后,创建的组件没有被销毁,(编辑数据,由于数据回填动作写在created中,子组件用dialog包裹,导致数据回填不正确,props的执行是异步的)

    • 解决方法1 v-if 销毁重建。会自动执行created 在组件上创建属性 v-if =“showDiaglo” ,关闭弹出层后进行组件销
    • 解决方法2 在父组件里,点击编辑后,找到子组件,调用获取详情方法
      • 如何在父组件中调用子组件方法 ref
        • 父组件 this.$refs.子组件名字.方法
        • 子组件添加ref属性 ref=“方法”
    • props的传递是异步的
    • this.$nextTick(( )=>{把异步变成同步 })
    更多相关内容
  • vue 父传子props

    千次阅读 2021-06-22 13:39:05
    父传子(通过prop实现通信) 1、静态传递 子组件通过props选项来声明一个自定义的属性,然后组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据。 通过v-bind绑定props的自定义的属性,可以是一个表达式、...

    父传子(通过prop实现通信)

    1、静态传递
    子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据。

    通过v-bind绑定props的自定义的属性,可以是一个表达式、布尔值、对象等等任何类型的值。

    父组件

    <template>
     <div>
     <h1>我是父组件!</h1> 
     <child v-bind:message="msg"></child>
     </div>
    </template> 
    <script>
    import Child from '../components/child.vue'
    export default {
    //子组件引用
     components: {
        Child
     },
     data() {
     return {
      msg: '我是子组件三!'+ Math.random()
     }
     }
    }
    </script>
    

    子组件

    <template>
     <h3>{{message——使用}}</h3>
    </template>
    <script>
     export default {
     props: ['message']——接收
     }
    </script>
    
    展开全文
  • vue 父传子props用法示例

    千次阅读 2019-12-23 19:56:16
    vue 父传子props用法示例 思路过程:在子组件定义props,你可以选择给接收到的值做校验。在组件引入子组件,然后在子组件标签绑定你要传递的值。 子组件 // 子组件 <template> <div class="childDiv"&...

    在这里插入代码片@TOC

    vue 父传子props用法示例

    思路过程:在子组件定义props,你可以选择给接收到的值做校验。在父组件引入子组件,然后在子组件标签绑定你要传递的值。

    子组件

     // 子组件
    <template>
     	<div class="childDiv">
     		<span>{{msg}}</span>
    	</div>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {}
    		},
    		// 接收来自父组件的数据
    		// props可以使数组,也可以是对象(校验)
    		// props: [ 'msg' ]
    		props: {
    			msg: {
    				type: String, // 指定msg类型
    				require: false, // 是否必传,这里如果为true,在父组件不传msg,页面会报错
    				default: null // msg的默认值
    			}
    		}
    	}
    </script>
    

    父组件

     // 父组件
    <template>
     	<div class="fatherDiv">
     		// 传固定String
     		<ChildDiv :msg="123123" />
     		// 传动态String
     		<ChildDiv :msg="msgVal" />
    	</div>
    </template>
    
    <script>
    	// 引入子组件
    	import ChildDiv from "./components/childDiv"
    	export default {
    		data () {
    			return {
    				msgVal: null
    			}
    		},
    		// 注册childDiv组件
    		components: {
    			ChildDiv
    		},
    		methods: {
    			getMsgVal () {
    				this.msgVal = "123456"
    			}
    		}
    	}
    </script>
    

    父传子就是这么简单,纯手打。谢谢!!~

    展开全文
  • 组件给组件传递数据,发送者就是组件,那么怎么发送数据给组件呢? 步骤 1、引入:在组件中引入组件 2、挂载:components中挂载 3、传值:通过键值对的形式书写在组件身上(注意:传递js表达式(常量,...

    父组件怎么发送数据

    父组件给子组件传递数据,发送者就是父组件,那么怎么发送数据给子组件呢?
    步骤
    1、引入:在父组件中引入子组件
    2、挂载:components中挂载
    3、传值:通过键值对的形式书写在子组件身上(注意:传递js表达式(常量,变量,数字,
    对象,数组),要加:冒号。不加的话,vue模板解析会认为是一个字符串)
    
    <template>
      <div>
        <!-- 3、传递 -->
        <Son
          name="张三"
          :age="18"
          :hobby="['吃饭', '睡觉', '打豆豆']"
          :lover="{ name: '李四', age: 18 }"
          noProp="noProp"
        ></Son>
      </div>
    </template>
    
    <script>
    // 1、引入
    import Son from "./components/Son.vue";
    export default {
      name: "App",
      // 2、挂载
      components: {
        Son,
      },
    };
    </script>
    
    <style>
    </style>
    

    子组件怎么接收?

    父组件已经传递值了,那么子组件怎么接收呢?
    有两种接收方式:
    1、数组的形式(简单接收)
    2、对象的形式(复杂接收,可以设置类型校验,默认值,是否必传,以及自定义校验规则)
    

    简单接收

    <template>
      <div>
        <div>Son组件</div>
        <div>{{ name }}</div>
        <div>{{age}}</div>
        <div>{{hobby}}</div>
        <div>{{lover}}</div>
        <div>{{variable}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "web-son",
      // 简单接收
      props: ["name", "age", "hobby", "lover", "variable"],
    };
    </script>
    
    <style scoped>
    </style>
    

    顺利接收
    在这里插入图片描述

    复杂接收

    <template>
      <div>
        <div>Son组件</div>
        <div>{{ name }}</div>
        <div>{{ age }}</div>
        <div>{{ hobby }}</div>
        <div>{{ lover }}</div>
        <div>{{ variable }}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "web-son",
      props: {
        name: String,
        age: Number,
        hobby: {
          // 允许传递多种数据类型
          type: [Array, Object],
        },
        lover: {
          type: Object,
        //   必须传值
          required: true,
        },
        variable: {
          type: String,
        //   父组件不传这个数据,那么这个值的默认值就为default的内容
          default: "我是默认值",
          //   自定义校验函数,返回值为true则校验通过,否则不通过
          validator: function(value){
            //   value为父组件传递的值
            // 常用的场景,封装组件库时,规定这个props值只能是哪些值
            return ["变量","我是默认值"].indexOf(value) != -1
          }
        },
        /* 说明:一般required和default不一块使用,因为没有啥
        意义,必传就一定用不上默认值 */
      },
    };
    </script>
    
    <style scoped>
    </style>
    

    顺利接收
    在这里插入图片描述

    不满足校验规则的一些报错信息(常见于用开源ui组件库时)

    数据类型不对

    当类型为String的name,我传入一个数字12时,报错翻译过来就是无效的prop类型检验
    失败,应该传入一个字符串,但是12是一个数字
    

    在这里插入图片描述

    必传未传

    这个报错就比较容易理解了,丢失了一个必传的prop "lover"
    

    在这里插入图片描述

    自定义校验函数未通过

    当我给variable传入一个"变量2",报错信息为,对prop值variable自定义校验函数失败
    

    在这里插入图片描述

    props接收的值存在哪?

    为什么我们按照这种方式传值之后,可以直接在组件中通过this.xxx访问到呢?
    我们打印一下当前的组件VueComponent对象查看一下
    
    mounted(){
        console.log(this);
      }
    

    在这里插入图片描述

    在这里插入图片描述

    可以发现,vue直接从_props中将这些属性添加到了当前的组件实例身上,所以我们才能
    通过this.xxx访问得到。
    

    父组件传了,子组件props未声明接收,值去哪了?

    认真阅读的读者发现了,我在父组件中传的noProp字符串,怎么没在子组件中接收呢?
    它们去哪了呢?其实vue对于这种情况也做了处理。vue将变量(传了但是props未接收的),
    就会被放在vue组件实例.$attrs身上,它和$listeners属性牵扯到vue2另外一种组件通信,
    后续将在专栏中补充,这两个属性在封装ui组件库,在进行多代关系的组件通信时十分有用
    

    在这里插入图片描述

    为什么不建议子组件修改props?

    从之前打印的实例对象发现,实例对象身上并没有与之对应get和set方法。(_props对象
    上有)并且如果我们直接通过this.xxx = ?修改props的值,vue会报错。eslint代码检验
    也会报错。如果通过this._props.xxx = ?修改props的值,可以修改成功,但是根据vue的数据流,子组件虽然更改了值,由于数据是从父组件来的,父组件的值并没有被修改,因此子组件重新渲染的时候,值依然是父组件中的值。并且如果你这么做,谷歌浏览器控制台也会弹出warn
    

    在这里插入图片描述

    想要修改props的值怎么办?

    从之前控制台的warn可以发现,vue官方给予我们提示了,你可以使用data或者computed
    来复制一份props中的值,然后再进行修改以及后续业务逻辑的处理。(补充:根据vue源
    码得知,props的加载顺序在data和computed之前,因此在data或computed中访问props
    中的值不会是undefined)
    
    data() {
        return {
          sonName: this.name + "son",
        };
      },
    computed: {
      sonName2() {
        return this.name + "son";
      },
    },
    

    .sync修饰符

    当给子组件传递一个值时,使用.sync修饰,会给子组件的消息发布与订阅的消息队列添加
    一个update:变量名。代码演示。
    

    App.vue

    <template>
      <div>
        <!-- 3、传递 -->
        <Son
          ...
          :page.sync="page"
        ></Son>
        <div>father-page:{{page}}</div>
      </div>
    </template>
    
    <script>
    // 1、引入
    import Son from "./components/Son.vue";
    export default {
      name: "App",
      data() {
        return {
          ...
          page: 1
        };
      },
      // 2、挂载
      components: {
        Son,
      },
    };
    </script>
    
    <style>
    </style>
    

    在这里插入图片描述
    Son.vue

    mounted() {
        ...
        this.$emit("update:page",2);
      },
    

    在这里插入图片描述

    完整代码

    App.vue父组件

    <template>
      <div>
        <!-- 3、传递 -->
        <Son
          name="张三"
          :age="18"
          :hobby="['吃饭', '睡觉', '打豆豆']"
          :lover="{ name: '李四', age: 18 }"
          :variable="variable"
          @clg="
            {
              () => {
                console.log();
              };
            }
          "
          noProp="noProp"
          :page.sync="page"
        ></Son>
        <div>father-page:{{page}}</div>
      </div>
    </template>
    
    <script>
    // 1、引入
    import Son from "./components/Son.vue";
    export default {
      name: "App",
      data() {
        return {
          variable: "变量",
          page: 1
        };
      },
      // 2、挂载
      components: {
        Son,
      },
    };
    </script>
    
    <style>
    </style>
    
    
    

    Son.vue子组件

    <template>
      <div>
        <div>Son组件</div>
        <div>{{ name }}</div>
        <div>{{ sonName }}</div>
        <div>{{ sonName2 }}</div>
        <div>{{ age }}</div>
        <div>{{ hobby }}</div>
        <div>{{ lover }}</div>
        <div>{{ variable }}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "web-son",
      data() {
        return {
          sonName: this.name + "son",
        };
      },
      computed: {
        sonName2() {
          return this.name + "son";
        },
      },
      props: {
        name: String,
        age: Number,
        hobby: {
          // 允许传递多种数据类型
          type: [Array, Object],
        },
        lover: {
          type: Object,
          //   必须传值
          required: true,
        },
        variable: {
          type: String,
          //   父组件不传这个数据,那么这个值的默认值就为default的内容
          default: "我是默认值",
          //   自定义校验函数,返回值为true则校验通过,否则不通过
          validator: function (value) {
            //   value为父组件传递的值
            // 常用的场景,封装组件库时,规定这个props值只能是哪些值
            return ["变量", "我是默认值"].indexOf(value) != -1;
          },
        },
        /* 说明:一般required和default不一块使用,因为没有啥
        意义,必传就一定用不上默认值 */
      },
      mounted() {
        console.log(this);
        // this.name="zhangsan";
        // this._props.name = "zhangsan";
        this.$emit("update:page",2);
      },
    };
    </script>
    
    <style scoped>
    </style>
    
    展开全文
  • vue父传子props的使用

    千次阅读 2021-01-16 23:18:52
    第一种传递一个数组props:["cont"]第二种传递一个对象props:{uploadOption:{type:Object, 参数类型必须是一个对象required: true 这一种说明这个参数是必须的哈}}其他的用法基础的类型检查 (null 和 undefined 会...
  • props:[“cont”] 第二种 传递一个对象 props:{ uploadOption:{ type:Object, 参数类型必须是一个对象 required: true 这一种说明这个参数是必须的哈 } } 基础的类型检查 (null 和 undefined 会通过任何类型验证)...
  • vue组件通信1:父传子props

    千次阅读 2021-09-27 21:47:45
    2.props具有单向下行绑定,由组件传递给组件。且组件不能修改props。 二,组件props声明 1.props是配置对象的一个配置项,可接受数组和对象。 (1)数组:['title','content'] 声明该组件接受组件传递的...
  • Vue2组件间通信——父传子props

    多人点赞 2021-09-02 11:24:46
    Vue2组件间通信——父传子props Vue2中组件间通信系列,本篇是关于组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项 功能: 子组件可以接收到组件传递的数据信息,适用于组件间通信,...
  • 主要介绍了Vueprops父传子的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇解决vue 组件修改组件来的props值报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue组件通信---父传子props传孙

    千次阅读 2019-11-20 11:22:28
    在通信中,无论是组件向组件传值还是组件向组件传值,他们都有一个共同点就是有中间介质,的介质是自定义事件,的介质是props中的属性。抓准这两点对于父子通信就好理解了。 所有的 prop 都...
  • 本文主要给大家介绍了关于vue组件通过props组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需...
  • 第一种:多条数据时在组件中遍历 组件: 定义一个空数组接收返回的数据 在methods将数据赋值给数组 ...在mounted调用这个函数(this....第二种如果在组件遍历,组件直接渲染 组件: 还是要定义一个listD...
  • 组件使用props来声明需要从组件接受的数据。 注意的: 在js中对象和数组是引用类型,指向同一个内存空间,所以props是对象和数组时,在组件内改变是会影响组件的。 组件中 <template> <div> ...
  • vue中,属性props用来实现将组件的数据传递给组件。当组件的属性变化时,将传递给组件。 引用:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到组件中,但是...
  • 组件的值是通过组件通过循环赋值的,且为数组,组件打印该循环的值是可以得到的,但是在自组卷中就获取不到了 组件位置 组件接收的值需要通过watch监听处理才可以 原因:组件中定义的这个数组默认为空...
  • 主要介绍了vue父组件向组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
  • 父传子: 主要步骤: 首先在子组件props中创建一个属性,用以接收组件传过来的值; 然后组件中引用子组件,并在子组件标签中添加子组件props中创建的属性; 最后把需要传给子组件的值赋给该属性。 理解: ...
  • vue父组件的props传值操作

    千次阅读 2019-03-25 11:39:40
    1.props的大小写:对于html里的短横线命名,在vue里面要用小驼峰命名法(大驼峰命名介绍:第一个字母也是大写); 2.template里必须有一个根目录: 需求2.:实际项目中我们经常要将data里面的值传递给模板,操作如下: ...
  • Props传递数据(父传子) & 自定义事件(子传)案例
  • 主要介绍了Vue父组件向组件传值以及data和props的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • <title>Documenttitle> <script src="../js/vue.js">script> head> <body> <cpn :cmessage="message">cpn> div> <template id="cpn"> <div> <h2>{{cmessage}}h2> div> template> <script> // 父传子props const ...
  • 组件代码 <template> <div> <item1 :test="{test:1}"></item1> //<item1 :test="[1]"></item1> //<item1 :test="'str'"></item1> </div> </...
  • 组件 parent.vue <template> <!-- 引入组件 自定义了parentsEmit方法和pData属性-->... 我是组件过来:{{num}} </template> <script> import { ref } from 'vue' setu
  • 出错点:Invalid default value for prop "rowMsg": Props with type Object/Array must use a factory function to return the default value. 出错写法: 解决办法 : 如果是数组的话 写成 default : () ...
  • 下面小编就为大家分享一篇vue2.0 组件改变props值,并向组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 父传子 组件 <!-- 三级连选器组件 --> //绑定组件 所需要传的值 <CascadingSelector ref="child" @sonSend="fatherJoin" :nums='num'/> //这是所需要传的值 num: { province: '', city:''...
  •  组件parent.vue // asyncData为异步获取的数据,想传递给组件使用 <template> <div> 组件 <child :child-data="asyncData"></child> </div> </template> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 121,654
精华内容 48,661
关键字:

vue父传子props

友情链接: BA.rar