Vue组件-04-vue组件md

基础-组件-组件体验

场景: 重复的页面结构,数据,逻辑 都可以抽提成一个组件

特点 简单 高效 不重复

基础-组件-组件特点

组件和实例相似之处: data/methods/computed/watch 等一应俱全

注意：

• data和Vue实例的区别为
• 组件中data为一个函数且需要返回一个对象
• 组件没有el选项
• template 代表其**页面结构** (有且只要一个根元素)

每个组件都是**独立**的 运行作用域、数据、逻辑没有任何关联

基础-组件-全局组件

全局和局部: 注册方式不同 应用范围不同

注意: 注意命名规范

路径: 实现一个全局组件

1. 定义一个全局组件

2. 写入组件选项

3. 使用组件

 // 注册组件名称 推荐 小写字母 加横向的结构
      Vue.component("content-a", {
        template: `<div>
        {{count}} 
        </div>`,
        data() {
          return {
            count: 1
          };
        }
      });
		<content-a></content-a>
// 注意  data中必须为一个返回对象的函数
// template必须有且只有一个根元素

任务 实现一个全局组件 完成 加减步进器

基础-组件-局部组件

局部组件的实现

​ 1.在实例选项compoents中定义局部组件名字

​ 2.在组件名字相对应的对象中定义选项(template、data()、…)

​ 3.在实例视图中使用组件

// 1.实例选项compoents中定义局部组件名字
components: {
// 2.在组件名字相对应的对象中定义选项(template、data()、.....)
 "z-j": {
        template: `<div>我是z-j组件--{{msg}}</div>`,
        data() { 
            return {
                msg: "abc"
            }
        }
    }
   }
   // 3.在实例视图中使用组件
<div id="app">
<z-j></z-j>
</div>

基础-组件-组件嵌套

1. 全局组件 嵌套 全局组件

2. 局部组件 嵌套 全局组件

// 全局组件
Vue.component('child-a', {
	template: "<div>我是child-a组件</div>"
})
Vue.component('child-b', {
	template: "<div>我是child-b组件</div>"
})
// 全局嵌套全局（此时 child-a和child-b 是parent-a的子组件）
Vue.component('parent-a', {
template: 
 `<div>
     <child-a></child-a>
     <child-b></child-b>
 </div>`
})
// 局部嵌套全局 （此时 child-a和child-b 是com-a的子组件)
components: {
"com-a": {
  template: `
      <div>
          <child-a></child-a>
          <child-b><child-b>
      </div>
      `
}}

注意: 组件嵌套和全局及局部组件没关系

基础-组件-组件通信的几种情况

组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信

组件之间的通信根据关系的可以分为:

1. 父子组件通信

• 父组件到子组件
• 子组件到父组件

2. 兄弟组件通信

基础-组件-父子组件传值-props属性

​ 父子组件的传值有多种方法, 兄弟组件的通信也有自己的写法

1. 子组件的 props 属性值是一个数组

2. 数组中的值 绑定为子组件上的属性 用来接受父组件的传值

3. 在子组件的template中就可以使用 绑定的属性（msg）拿到父组件传递的值

// 调用组件
<div id="app">
	<child-a :msg="msgParent"></child-a>
</div>

// 子组件
Vue.component("child-a", {
 template: ` <div>
         我是子组件
         {{count}}是自己的data中的数据count
         {{msg}}是来源于外部组件的数据</div>
         </div>`,
 data() {
     return {
         count: 100
     }
 },
 props: ["msg"]  
})

// 父组件(根组件)
new Vue({
    el：'#app'
    data: {
			msgParent: "我是父组件"
	}
})