组件间数据传递

最新推荐文章于 2024-05-16 15:30:16 发布

kzbRise68

最新推荐文章于 2024-05-16 15:30:16 发布

阅读量502

点赞数 1

分类专栏：癫疯的前端汪文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/kzb68up/article/details/120386135

版权

癫疯的前端汪专栏收录该内容

12 篇文章 1 订阅

订阅专栏

卷不过就加入，一个励志成为金针菇级癫疯前端汪的男人。

组件间数据传递

前言
一、父传子——props
二、子传父——$emit
- 1.使用$emit触发父组件中定义的事件
总结

前言

组件实例具有局部作用域（data是一个函数，renturn返回数据）。组件间的数据传递需要借助一些工具，主要是props和$emit方式来实现。

提示：以下是本篇文章正文内容，下面案例可供参考

一、父传子——props

“props”英文即“道具”，用来接收父组件中定义的数据。可以是数组(字符串数组)，也可以是对象(开发常用)。

1.props类型为数组

代码如下（示例）：

<body>
    <div id="app">
        <cpn v-bind:cmessage="message"></cpn>
    </div>
</body>

<script>
  //父传子 props类型为数组，里面变量名用字符串形式
    const cpn={
      template:`<div>
                 {{cmessage}}
               </div>`,
      props:["cmessage"]
    }
   Vue.component('cpn',cpn);

    const app=new Vue({
      el:'#app',
      data: {
        message:"hello Vue"
      },  
    })
</script>

props数组类型

在上述案例中，Vue实例可以看作一个组件，在这个实例组件中添加一个自定义全局组件，形成父子关系。
父组件向子组件传递数据利用v-bind绑定来实现，若是普通的html属性绑定，只会传递一个字符串。

2.props类型为对象

代码如下（示例）：

   <div id="app">
        <!-- <cpn v-bind:cmessage="message"></cpn>
        <hr> -->
        <cpn2 v-bind:cmovies="movies"></cpn2>
    </div>

 const cpn2={
      template:`<div>
                   {{cmessage}}
                   
                    <ul>
                        <li v-for="(item,index) in cmovies">
                        索引--{{index}}    元素--{{item}}
                       </li>
                    </ul>
               </div>`,
      props:{
              //1.简单实现限制
              //cmovies:Array,
              //cmessage:string,

              //2.深入实现限制
              cmessage:{
                type:String,
                default:'我是默认的props数据'
              },
              cmovies:{
                type:Array,
                
              }
      }
    }
   Vue.component('cpn2',cpn2);


   //vue实例
    const app=new Vue({
      el:'#app',
      data: {
        message:"hello Vue",
        movies:['金刚狼','X战警','神奇四侠','权力的游戏']
      },  
    })

props对象类型

在上述案例中，props为对象时并且添加require属性为true，父组件必须向子组件传递数据，否则会报错。

3.props驼峰标识问题

props里的变量命名不可以驼峰(大小写不识别)，可以用 ’ - ’ 代替。 v-bind不支持驼峰。

props驼峰

二、子传父——$emit

1.使用$emit触发父组件中定义的事件

原理：$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。

代码如下（示例）：

<body>
    <div id="app">
        <father></father>
    </div>

    <template id="children">
      <div>
        <ul>
          <li v-for="(item) in things">
            <button @click="btnclick(item.name)">{{item.name}}</button>
          </li>
        </ul>
      </div>
    </template>
</body>

//子组件
  const children={
    template:"#children",
    data() {
      return {
         things:[
           {id:1,name:"数码电器"},
           {id:2,name:"生鲜超市"},
           {id:3,name:"物流查询"},
           {id:4,name:"充值缴费"}
         ]
      };
    },
    methods:{
      btnclick(name){
           this.$emit('ckick', name);
      }
    }
  }
  Vue.component('children',children);
  //父组件
  const father={
    template:`<div style="background:pink;padding:20px"> 
                  <div style="background:skyblue;width:200px"> 
                        <children  @ckick="father" ></children>
                  </div>
                {{name}}
              </div>
              `,
    data() {
      return {
        name: '',
      };
    },
    methods:{
      father(n){
        console.log(n);
        this.name=n;
      }
    }
  }
  Vue.component('father',father);



  //实例
    const app=new Vue({
      el:'#app',
      data: {
        message:"hello Vue"
      },
      methods:{},
    })

子组件设置事件，函数中利用$emit触发父组件中定义的事件，并且传递参数。
父组件中用v-on监听子组件，(@子触发=methods定义函数),由此完成子组件向父组件传递数据。

总结

以上就是今天要讲的内容，总之
父传子：子定义props，父用v-bind。
子传父：子的事件函数调用 $emit（传“触发名”，且传数据），父@“触发名”=自己的函数，函数里完成接收数据。

kzbRise68

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
组件间数据传递

励志成为金针菇级别癫疯前端汪。卷不过就加入。组件间数据传递前言一、父传子——props1.props类型为数组2.props类型为对象二、子传父——$emit1.使用$emit触发父组件中定义的事件来传递数据2.读入数据总结前言组件实例具有局部作用域（data是一个函数，renturn返回数据）。组件间的数据传递需要借助一些工具，主要是props和$emit方式来实现。提示：以下是本篇文章正文内容，下面案例可供参考一、父传子——props“props”英文即“道具”，用来接收父组件中定
复制链接

扫一扫