zoukankan      html  css  js  c++  java
  • uniapp、Vue组件的使用引用子组件、传值

     1 //子组件 bar.vue
     2 <template>
     3   <div class="search-box">
     4     <div @click="say" :title="title" class="icon-dismiss"></div>
     5   </div>
     6 </template>
     7 <script>
     8 export default{
     9 props:{                  // 获取父组件传来的值
    10     title:{
    11        type:String,
    12        default:''
    13       }
    14     }
    15 },
    16 methods:{
    17     say(){
    18        console.log('明天不上班');
    19        this.$emit('helloWorld')  // 传值给父组件
    20     }
    21 }
    22 </script>
    23 
    24 // 父组件 foo.vue
    25 <template>
    26   <div class="container">
    27     <bar :title="title" @helloWorld="helloWorld"></bar>
    28   </div>
    29 </template>
    30 
    31 <script>
    32 import Bar from './bar.vue'  // 引用
    33 export default{
    34 data(){
    35     return{
    36         title:"我是标题"
    37     }
    38 },
    39 methods:{
    40     helloWorld(){
    41         console.log('我接收到子组件传递的事件了')
    42     }
    43 },
    44 components:{
    45     Bar
    46 }
    47 </script>

    1.引用:

      ①在需要使用的父组件中通过import引入;

      ②在vuecomponents中注册;

      ③在父组件中直接引用,如:<bar></bar>

     2.传值给子组件

      ①在父组件通过v-bind传入一个值,如:<bar :title="title"></bar>

      ②在子组件中,通过props接收,如:

      props:{                  // 获取父组件传来的值
          title:{
              type:String,
              default:''
             }
          }
      },

     3.传值给父组件——通过this.$emit将方法和数据传递给父组件

      ①子组件:this.$emit('helloWorld') // 传值给父组件

      ②父组件:

       helloWorld(){
           console.log('我接收到子组件传递的事件了')
       }
    

      

      

    365个夜晚,我希望做到两天更一篇博客。加油,小白!
  • 相关阅读:
    python命令行传参详解,optparse模块OptionParse类的学习
    设计模式之共享模式
    用flask搭建一个测试数据生成器(v1.1)
    用flask搭建一个测试数据生成器(v1.0)
    jmeter中使用beanshell断言
    jmeter中beanshell脚本的使用
    从上帝视角看OS进程调度
    Linux网络内部原理系列
    从文件read/write一个字节的过程和所发生的磁盘IO
    深入理解系统中断(INTERUPT)
  • 原文地址:https://www.cnblogs.com/qq2806933146xiaobai/p/15823142.html
Copyright © 2011-2022 走看看