• 【vue】组件


    组件传值

    1.父传子 
                  父中
                         v-bind : 子中props的某个需要被传的属性名 = '父中需要传的值';
                  子组件中
                         props: ['子中props的某个需要被传的属性名']
     
    
                   
    2.子传父 
      https://www.cnblogs.com/web-record/p/10320765.html 
    3.子组件传子组件用vuex1
    

    1组件创建

    1.通过Vue.extend不怎么常用,自己封装组件的时候常用

            单文件vue文件
                
                    Vue.extend({
                         methods: { }
                  })
    

    2.通过Vue.component()字面量注册 全局

         Vue.component('my-apprvuser',{
                  template:'',
                  data:function(){
                  return{}
                  }
                //选项
        })
    
    源码中:
    definition = this.options._base.extend(definition) //其实就是Vue.extend方法                 
    Vue.options[components][id] = definition
    总结起来,全局注册组件就是Vue实例化前创建一个基于Vue的子类构造器,并将组件的信息加载到实例options.components对象中
    

    备注Vue.use http://kmxs.com.cn/articles/vue/2019-12-18/102.html
    这里use其实就在install函数里面用得Vue.component()

     install:(Vue) => {
            Vue.component('XX',xxx);
     }
    

    3.局部 (只能在#app中使用)

    new Vue({ 
               el: '#app',
               components: { 
                           'component-a': ComponentA, 
                           'component-b': ComponentB
                } 
         })
    

    4.vue单文件组件注册,这个也是最常用的

    单文件里面父组件包含子组件:

    components: {
        Son
    }//这个里面加,这种就是局部注册
    

    https://www.cnblogs.com/sanyun/p/11679523.html

    【总结】
    全局注册的组件是扩展到了Vue.options下,所有组件的构造函数都会把Vue.options扩展到自己的options中,
    因此所有的组件都可以使用。而对于根实例vm也就new出来的那个实例,在_init的时候会把Vue.options合并到vm.$options中去。
    全局注册的组件因为不属于任何一个组件,所以采用放在了vm.options.components的原型上这种合并策略, 简单说就是Vue.options.components给vm.$options.components用的时候,只给一个空对象,这个空对象指向我就好了,直接白给不可能的,哼哼~
    而局部注册的组件是扩展到当前组件对应的构造函数上了,因此只有该组件才能使用。
    https://juejin.cn/post/6844904149692186632

    2路由创建的时候,也可以附带注册组件

    import HelloWorld from 'xxx.vue'
    routes:[
    {
     path:'/',
     name:'test',
     component:HelloWorld
    }
    
    ]
    

    vue子父组件值双向传递

    1.首先必须是父组件给子组件赋值属性,所以子组件中属性不能改
    2.子组件用一个data先等于属性值,子组件通过事件将data值传给父组件,修改父组件data,由父组件修改子组件属性值,做到双向绑定

    vue 组件通信

    【vue provide和inject】
    用于隔代组件通信,vue官方好像不推荐
    【父传子】
    props
    【子传父】
    emit
    【vuex】
    比较万能 
    【Vue中this.$parent和this.$ children】
    当前组件实例可以访问到子组件或者父组件实例
    【eventbus】
    创建一个公共组件 分别使用emit和on在俩组件中进行事件订阅
    
  • 相关阅读:
    【Java】基于SpringBoot创建Web页面并热更新
    【漏洞复现】fastjson_1.2.24_unserializer_rce
    数据结构知识点总结11-(第六章.图)-图的基本概念
    2022 阿里全球数学竞赛获奖名单公布,其中 00 后选手占了一半多,如何评价这一现象?
    数字图像处理实验记录五(图像的空间域增强-锐化处理)
    java毕业设计成品基于JSP实现的飞机票售票管理系统[包运行成功]
    自动驾驶系统激光雷达传感器反射率标定板
    必知必会的PyCharm使用技巧
    Flutter 跨平台框架中的 Widgets,你了解多少?
    关于PointHeadBox类的理解
  • 原文地址:https://blog.csdn.net/qq_22849251/article/details/127067897