19-父组件向子组件传值

最新推荐文章于 2023-01-15 11:36:05 发布

wahaha-me

最新推荐文章于 2023-01-15 11:36:05 发布

阅读量149

点赞数

分类专栏： vue学习文章标签：组件传值

vue学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

19-父组件向子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
    <com1 :titl="msg"></com1>
    <com2 @func="show"></com2>
</div>
<template id="tem2">
    <div>
        <h1>这是子组件</h1>
        <input type="button" value="这是子组件按钮，点击触发父组件事件" @click="myclick">
    </div>
</template>

<script>
    var vm = new Vue({
      el:'#app',
      data:{
        msg:'123--父组件的数据',
        fromson:''
      },
      methods:{
        show(data1){
          console.log('父组件的'+data1)
          this.fromson=data1
        }
      },
      components:{
        com1:{
          template:'<h1>这是子组件的---{{titl}}</h1>',
          props:['titl'],
          methods:{
          }
        },
        com2:{
          data(){
            return {
              sonmsg:{name:"儿子",age:6}
            }
          },
          template:"#tem2",
          methods:{
            myclick(){
              this.$emit('func',this.sonmsg.name)
            }
          }
        }
      }
    })
</script>

</body>
</html>