vue5

1.父给子传值 属性 props:['属性']

2.子给父传 用事件传 $emit

子给父传:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <div id='app'>

      <my-father></my-father>

  </div>

  <script src='js/vue.js'></script>

  <script>

      Vue.component("my-father",{

          template:`

            <div>

              <h1>{{mess}}</h1>

              <my-child @send='rcvMsg'></my-child>

            </div>

          `,

          data:function(){

              return{

                  mess:''

              }

          },

          methods:{

              rcvMsg:function(txt){

                  this.mess=txt

              }

          }

      })

      Vue.component('my-child',{

          template:`

                <button @click='sendToFather'>传给父元素</button>

            `,

          data:function(){

              return{

                  msg:'我是子组件中的数据,要给父组件传值'

              }

          },

          methods:{

            sendToFather:function(){

//                this.$emit('自定义事件名',要传输的数据)

                  this.$emit('send',this.msg)

            } 

          }

      })

      new Vue({

          el:"#app"

      })

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容