1. 全栈程序员必看首页

vue-cli工程 中组件注册 ，父组件向子组件传值

全栈程序员-站长 • • 未分类 • 阅读 89

vue-cli工程 中组件注册 ，父组件向子组件传值

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

**

首先我们准备一个父组件模板
————-

**

    1
    2
    3
    4
    5
    6

<template>
<template>
  <div id=”app”>

    <!– 使用子组件 –>
    <!– 向子组件传值 需要在父组件中使用v-bind绑定一个名字 :outdata=”arr” 其中outdata这个名字是
        你子组件中props属性接收数据时的名字 –>
    <three :outdata=”arr”/>
  </div>
</template>
<script>

//引入子组件
import three from ‘./components/three’

export default {

//全局注册组件
  components:{

    three
  },
  data(){

    return {

      arr:[1,2,3,4,5] //父组件的数据
    }
  }
}
</script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

子组件模板

<template>
    <div class=”three”>
        <h1>我是子组件</h1>

        <!– 它俩都能得到 –>
        {
{ items }}
        <br>
        {
{ outdata }}
    </div>
</template>

<script>
    export default {

        // 第一种写法：不推荐
        // props:[‘outdata’],
        // 第二种写法 推荐 需要注意传值 和传引用的default 写法区别
        // js中 object 和 Array 属于传引用 ,default 需要返回一个工厂函数的写法
        // 传值：Number  String Boolean 类型 default: 0||”||false 写法
        // 当props中的数据类型验证失败时，在开发版本下 在控制台会报警告
        props:{

            outdata:{

                type:Array,//类型也可以是多样 比如：String||Number
                required:true,
                default:()=>{

                    return [];
                }
            }
        },
        data(){

            return{

              items:this.outdata,// 也可以在这里接收
            }
        }
    }
</script>
 

转载于:https://my.oschina.net/u/3371661/blog/3000018

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101181.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号