学习前端_vue组件_父组件接收子组件中的数据

最新推荐文章于 2024-06-04 09:24:28 发布

啊辉的小号

最新推荐文章于 2024-06-04 09:24:28 发布

阅读量414

点赞数

分类专栏：前端学习小菜鸟学前端文章标签：前端 vue 父组件接收子组件中的数据

本文链接：https://blog.csdn.net/weixin_38527697/article/details/99637800

版权

小菜鸟学前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

前端学习

24 篇文章 0 订阅

订阅专栏

父组件不能直接获取子组件中的数据，只能通过子组件发送时间的方式传递数据

1：在子组件中定义发送方法例如：this.$emit('ve',this.name,this.address,this.sex) 第一个参数是事件名称，后面的参数是要发送的数据

2：在掉用子组件的地方设置绑定例如<my-vue2 @ve='getData'></my-vue2> 've'是步骤一中的第一个参数，‘getdate'是接收数据的方法

3：在父组件中定义接收数据的方法例如：getData(children_name,children_address,children_sex) 参数和步骤1中的数据参数要一一对应。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>父子组件</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="test">
    <my-vue1></my-vue1>
  </div>
  <template id="vue1">
    <div>
      <p>这是父组件</p>
      <p>姓名是：{{name}} 地址：{{address}} 性别：{{sex}}</p>
      <p>子组件的数据： {{children_name}}{{children_address}}{{children_sex}}</p>
      <my-vue2 @ve='getData'></my-vue2>    <!-- 步骤2：调用的父组件中调用的子组件中设置接收事件匹配 -->      
    </div>
  </template>
  <template id="vue2">
    <div>
      <p>这是子组件</p>
      <p>姓名是：{{name}} 地址：{{address}} 性别：{{sex}}</p>
      <input type="button" value="向父组件发送数据" @click='send()'>
    </div>
  </template>
  <script>
    new Vue({
      el:"#test",
      components:{
        'my-vue1':{
          methods: {
            getData(children_name,children_address,children_sex){        //步骤3：在子组件中定义接收方法
              this.children_name=children_name;
              this.children_address=children_address,
              this.children_sex=children_sex;
            }
          },
          template:'#vue1',
          data() {
            return {
              name:'张三',
              address:'上海',           
              sex:'男',
              children_name:'',
              children_address:'',
              children_sex:''
            }
          },  
          components:{         
            'my-vue2':{
              template:'#vue2',
              data() {
                return {
                  name:'李四',
                  address:'北京',
                  sex:'女'
                }
              },
              methods: {
                send(){
                  this.$emit('ve',this.name,this.address,this.sex)  //步骤1在子组件中定义发送方法
                }
              },
            }
          }

        }
      }
    })
  </script>
</body>
</html>

啊辉的小号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端_vue组件_父组件接收子组件中的数据

父组件不能直接获取子组件中的数据，只能通过子组件发送时间的方式传递数据1：在子组件中定义发送方法例如：this.$emit('ve',this.name,this.address,this.sex) 第一个参数是事件名称，后面的参数是要发送的数据2：在掉用子组件的地方设置绑定例如<my-vue2 @ve='getData'></my-vue2>...
复制链接

扫一扫