Vue中子组件向父组件传递数据

最新推荐文章于 2024-07-12 21:26:02 发布

rain_pigeon_sama_

最新推荐文章于 2024-07-12 21:26:02 发布

阅读量340

点赞数

分类专栏： vue学习文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_43348428/article/details/104735580

版权

vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue中子组件向父组件传递数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--父组件-->
<div id="app">

  <children @datas="showdata"></children> <!--调用组件-->
  <!-- datas为子组件发送数据时的名字  this.$emit("datas",value)
       showdata为父组件的函数用来对接收的数据进行操作
  -->
  <h1>{{showmessage}}</h1>
</div>
<!--子组件-->
<template id="child">
  <div >
    <button @click="sendmessage(message)">传送数据</button>

  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const children={
    template: "#child",//组件id
    data(){
      return {
        message:"我是个消息"
      }
    },
    methods: {
      sendmessage:function (value) {
        console.log("send")
        this.$emit("datas",value)//把子组件的数据发送到父组件中，value为数据的内容
  }
    }

  }
  const app=new Vue({
    el:"#app",
    data:{
        showmessage:"null"
    },
    components:{
      children
    },
    methods:{
      showdata:function (value) {
        //父组件接收到信息之后的操作
        console.log(value+"**************")
            this.showmessage=value;//把子组件 的数据赋值到父组件中显示出来
      }
    },


  })

</script>
</body>
</html>

希望对你有所帮助

rain_pigeon_sama_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中子组件向父组件传递数据

Vue中子组件向父组件传递数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app...
复制链接

扫一扫