20201019赵鑫

学习总结

组件化开发
组件化规范:Web Components
全局组件注册语法:
Vue.component( 组件名称,{
data:组件数据,
template:组件模板内容
})
注意点:data必须是一个函数,使用函数会形成一个闭包的环境,让每个闭包都是独立的数据
组件模板内容必须是单个根元素
组件模板内容可以是模板字符串(需要es6兼容)

​ 组件命名方式
​ 短横线方式
​ Vue.component('my-component',{….})
​ 驼峰方式
​ Vue.component('MyComponent',{….})
​ 如果使用驼峰式命名组件,在使用组件的时候,只能在字符串模板中用驼峰式使用,但是在普通标签中必须使用短横线的方式使用组件。
​ 局部组件注册:
​ var ComponentA = {….}
​ var ComponentB = {….}
​ var ComponentC = {….}
​ new Vue({
​ el:"#app",
​ components:{
​ 'component-a':ComponentA,
​ 'component-b':ComponentB,
​ 'component-c':ComponentC,
​ }
​ })

​ 组件之间的数据交互
​ 一.父组件向子组件传值
​ 1.组件内部通过props接收传递过来的值
​ Vue.component('menu-item',{
​ props:['title'],
​ template:'

{{title}}

'
​ })
​ 2.父组件通过属性将值传递给子组件
(写死的)
(动态的)
​ props属性名规则
​ 在props中使用驼峰形式,模板中需要使用短横线的形式
​ 字符串形式的模板中没有这个限制
​ Vue.component('menu-item',{
​ props:['menuTitle'],
​ template:'

{{menuTitle}}

'
​ })

​ props属性值类型
​ 字符串String
​ 数值Number 必须用:不然类型是字符串
​ 布尔值Boolean 必须用:不然类型是字符串
​ 数组Array 必须用:
​ 对象Object 必须用:
​ props传递数组原则,单向数据

​ 子组件像父组件传值
​ 1.子组件通过自定义事件向父组件传递信息

​ 2.父组件监听子组件的事件

​ 3.子组件通过自定义事件向父组件传递信息

​ 4.父组件监听子组件的事件

学习心得

感觉状态或者什么的都挺好的,近期有一些对前面知识的巩固,也有学习了后面再反推前面知识带来更深一步的理解,感觉很不错。

标签

评论

this is is footer