组件-命名规则/组件传值

要努力奋斗鸭

已于 2023-07-09 16:34:37 修改

阅读量246

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-09 16:34:35 首次发布

本文链接：https://blog.csdn.net/weixin_52512511/article/details/131623395

版权

1.命名规则

两种规范写法：

（1）写法一：

例如com-parent、btn-add、com-child
规则小写单词加中线分割，多个单词拼接
使用按照组件的名称当做标签使用即可

（2）写法二：

例如ComParent、BtnAdd、ComChild
规则单词的首字母大写，多个单词拼接
使用

可以转成成小写单词加中线的写法当做标签使用即可

直接用组件的名称当做标签使用即可

只能在template指定的视图中使用（只能在组件中使用）

在根vue实例下是不能使用的

总结：使用的时候一律使用小写单词加中线这种方式，万无一失

2.组件传值

组件特点：组件与组件之间是相互独立的，数据也是相互独立的，但是组件与组件之间不可避免的要进行数据通信

组件与组件之间的关系不同，传值的方式也不同。分为三种关系：

父组件传值给子组件
子组件传值给父组件
非父子传值

（1）父传子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>

   <div id="app">
      <com-parent></com-parent>
    </div>

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

   Vue.component('com-parent',{
        template:'<div>我是父组件{{msg}} <com-child abc="abc属性值" :message="msg"></com-child></div>'
        data(){
           return{
             msg:'父组件的数据com-parent'
        }
       }
     })
 
  //把父组件的msg数据传递给子组件再来使用
  Vue.component('com-child',{
       template:'<div>我是子组件{{abc}}{{message}}<button @click="update()">改props</button></div>'
       //接收使用组件的时候，添加的属性数据
       //接收abc属性数据，abc可以像data中的数据一样使用
       //通过props接收的数据，特点：仅读（只可以访问，不可以修改）
       //数据传递值是单向的，这种方式是能：父传子
       props:['abc','message''],
       methods:{
        update(){
          this.message = 'xxxx' 
     }
    }
  })

 const vm = new Vue({
        el: '#app',
      })
  </script>
  </body>
</html>

总结：

使用子组件的时候写属性 :message="父组件数据"
定义子组件的时候写props配置项 props:['message']

（2）子传父

铺垫知识：组件的自定义事件（绑定，触发）

原生事件 dom元素| 标签能支持的事件
自定义事件给组件添加的事件，需要通过代码才能触发

//此处的input是com-a组件的自定义事件绑定
<com-a @input="fn"></com-a>

//触发组件的自定义事件 vue实例提供$emit是用来触发自定义事件的函数
组件实例.$emit('input')

jquery的自定义事件的绑定和触发

$('body').on('abc',function(){console.log('abc事件触发了')})

$('body').trigger('abc')

通过自定义事件的绑定和触发可以实现，子组件传值给父组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>
<body>
  
   <div id="app">
      <com-parent></com-parent>
   </div>

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

   Vue.component('com-parent',{
     tempalte:'<div>我是父组件 {{msg}} <com-child @childToParent="fn($event)"></com-child></div>',
     data(){
       return {
          msg:'' 
   }
  },
   methods:{
      //fn是自定义事件的处理函数
      //这里会有一个默认的传参 $event 此时：触发自定义事件的传参
      fn(e){
         console.log(e)
          console.log('自定义事件触发了')
          this.msg = e
   }
  },
})

   // 子组件的数据传递给父组件使用
  Vue.component('com-child',{
     tempalte:'<div>我是子组件 {{msg}} <button @clcik="fn2">触发子传父</button></div>',
     data(){
       return {
           msg: '子组件数据com-child' 
    }
   },
       methods:{
         fn2(){
           //点击button的时候
           //触发自定义事件
           //第一个参数：自定义事件的名称
           //第二个事件：传递的数据
           this.$emit('childToParent',this.msg)
     }
   }

 })

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

画图分析：

总结：

使用子组件的时候，绑定自定义事件
在子组件内部，通过$emit触发自定义事件，此时可以传参
当你触发自定义事件的时候，在事件函数中$event就是触发自定义事件时候的传参

要努力奋斗鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件-命名规则/组件传值

只能在template指定的视图中使用（只能在组件中使用）组件特点：组件与组件之间是相互独立的，数据也是相互独立的，但是组件与组件之间不可避免的要进行数据通信。可以转成成小写单词加中线的写法当做标签使用即可。在根vue实例下是不能使用的。直接用组件的名称当做标签使用即可。组件与组件之间的关系不同，传值的方式也不同。铺垫知识：组件的自定义事件（绑定，触发）jquery的自定义事件的绑定和触发。
复制链接

扫一扫