(1)非脚手架方式创建:
1️⃣使用vue.extend创建组件
2️⃣使用vue.component注册组件
3️⃣在html页面使用组件
(2)使用template创建组件
1️⃣使用template创建html页面模板,并给template定义id属性
2️⃣使用template的id属性值进行注册
今天周一
注:在Vue实例外部通过Vue.component创建或注册的组件称为全局组件
局部组件:创建方式和全局组件的创建方式一样,注册时必须放在Vue实例内部通过components进行注册
今天周一
(2)在WebStorm中使用脚手架创建组件:
1️⃣创建Vue component,组件命名采用驼峰命名
//必须有1个html的标签作为模板的根标签
(1)每个组件都有自己的数据:即每个组件都有自己的data
(2)vue实例的data和组件中的data的区别
1️⃣vue实例的data是一个对象
2️⃣组件的data必须是一个方法,该方法必须返回一个对象
哈哈哈
{{ info }}
3️⃣vue实例中的data和组件中data在使用方法上是一样的
(1)Vue组件之间的关系:
1️⃣父子关系:A组件和B组件、B组件和C组件、B组件和D组件
2️⃣兄弟关系:C组件和D组件
3️⃣隔代关系:A组件和C组件、A组件和D组件
(2)父组件向子组件传递数据: 通过props方式向子组件传递数据(在子组件中添加props属性)
父组件:App.vue
子组件:SmallSon.vue
App.vue ——>users数组 ——> SmallSon.vue
SmallSon.vue:
子组件:{{ userName }}
- {{ item }}
App.vue:
(3)子组件向父组件传值(通过事件形式)
SmallSon:
{{ sonInfo }}
App.vue:
父组件接收子组件的信息:{{ title }}