vue组件传参（父传子、子传父、利用组件传参实现分页显示数据）

最新推荐文章于 2023-11-30 16:09:08 发布

此鱼非闲鱼也

最新推荐文章于 2023-11-30 16:09:08 发布

阅读量969

点赞数

分类专栏： Vue 文章标签： vue传参组件自定义属性 vue实现分页显示数据

本文链接：https://blog.csdn.net/m0_45315697/article/details/105816610

版权

vue组件传参

1、父传子

  父：自定义属性名 + 数据（要传递）=> :value="数据"
  子：props ["父组件上的自定义属性名"] =>进行数据接收   
         
  父级调用子组件，通过子组件的属性传入数据
  子元素内部通过props配置(数组)，来接受对应的数据，如props:['属性1','属性2',...]

在可复用的组件中，最上层只能有一个根元素，
即template模板中需要一个根元素包裹着子元素
组件中内部私有数据存储在组件data中，通过外部传入的数据, 则通过 props选项接收。
props：使用存储数据，组件内部使用数据的方式与data的一样
一个组件默认可以拥有任意数量的属性，任何值都可以传递给任何属性。
data必须写成函数，使各组件之间空间独立，数据互不影响。
如data(){ return { 属性名：属性值 } }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件传参-父传子</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- vue实例中的属性 -->
        <p v-text="name2"></p><hr>
 
        <!-- 父传参给子 ，使用v-bind 绑定属性的方式 ，
             下面的pages与num是绑定的自定义属性-->
        <my-component :pages="10" :num="100"></my-component>

         <!--使用v-bind指令绑定对象或数组的值--> 
        <my-component v-for="elf in arrs" :key="elf.id" v-bind:username="elf.username"></my-component> 
    </div>
    
    <script>
        // 自定义全局组件
        Vue.component("my-component",{
           
            props:["pages","num","username"],
            template:`<div>  
                         <div>{
    {name1}}</div>
                         <div>{
    {pages}}</div>
                         <div>{
    {num}}</div> 
                         <div>{
    {username}}</div>           
                      </div>`,                        
            // data必须写成函数，使各组件之间空间独立，数据互不影响 
            data(){
    
                return {
   
                    // name1是自身的属性
                    name1:"我是自身的属性值啊"
                }
            }                
        });
        
        let app =

最低0.47元/天解锁文章

此鱼非闲鱼也

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue组件传参（父传子、子传父、利用组件传参实现分页显示数据）

vue组件传参1、父传子父：自定义属性名 + 数据（要传递）=> :value="数据" 子：props ["父组件上的自定义属性名"] =>进行数据接收父级调用子组件，通过子组件的属性传入数据子元素内部通过props配置(数组)，来接受对应的数据，如props:['属性1','属性2',...]在可复用的组件中，最上层只能有一个...
复制链接

扫一扫

专栏目录