【组件传值 】
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.
o
p
t
i
o
n
s
中去。全局注册的组件因为不属于任何一个组件,所以采用放在了
v
m
.
o
p
t
i
o
n
s
.
c
o
m
p
o
n
e
n
t
s
的原型上这种合并策略
,
简单说就是
V
u
e
.
o
p
t
i
o
n
s
.
c
o
m
p
o
n
e
n
t
s
给
v
m
.
options中去。 全局注册的组件因为不属于任何一个组件,所以采用放在了vm.options.components的原型上这种合并策略, 简单说就是Vue.options.components给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.
p
a
r
e
n
t
和
t
h
i
s
.
parent和this.
parent和this. children】 当前组件实例可以访问到子组件或者父组件实例 【eventbus】 创建一个公共组件 分别使用emit和on在俩组件中进行事件订阅
|