zoukankan      html  css  js  c++  java
  • 父子组件间相互传值

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>子组件传值给父组件与父组件传值给子组件</title>
     6 <script src="https://unpkg.com/vue/dist/vue.js"></script>
     7 </head>
     8 
     9 <body>
    10     <template id= "tem">
    11         <div>
    12             <h1>组件的使用</h1>
    13             <a @click="sendData">点我传值</a>
    14             <a>我是父组件的数据{{name1}}</a>
    15         </div>
    16     </template>
    17     <div id="myVue">
    18         <myput :name1="name" @send="getData"></myput>
    19     </div>
    20     <script type="text/javascript">
    21         Vue.component('myput',{
    22             template:'#tem',
    23             props:{
    24                 name1:String
    25             },
    26             data:function(){
    27                 return {
    28                     //我是子组件的数据
    29                     counter:520
    30                 }
    31             },
    32         
    33             methods:{
    34                 sendData:function (){
    35                     this.$emit("send",this.counter)
    36                 }
    37             }
    38         })
    39         new Vue({
    40             el:'#myVue',
    41             data:{
    42                 //我是父组件数据
    43 name:"hello" 44 }, 45 methods:{ 46 getData:function (d){ 47 alert(d) 48 49 } 50 } 51 52 }) 53 54 </script> 55 56 </body> 57 </html>
  • 相关阅读:
    SQL Server 代理配置
    HTTP request smuggling 学习笔记
    hashcat使用记录
    centos安装pip
    kali linux 使用记录
    ss搭建以及proxychains使用记录
    Linux命令后台运行
    XXE小结
    子域名枚举艺术深度剖析
    Excel RCE on macOS
  • 原文地址:https://www.cnblogs.com/blogsky-520/p/12765101.html
Copyright © 2011-2022 走看看