Vue组件化开发

一、 组件化编程

组件化开发是在ES6中提出来的，可以提高页面的复用率，提高开发效率。它是一套模板化的代码，要有、

1.1 编写App.vue和HelloWorld.vue

HelloWorld.vue

<template>
    <div>   <!-- template的根节点，是必须的 -->
        <h1 class="title">{{msg}}</h1>
    </div>
</template>
<script>
    export default {    <!-- 向外暴露成员，表示向外暴露该组件 -->
        data() {
            return {
                msg: 'Hello World'
            }
        }    
    }
</script>
<style>
    .title {
        color: red;
    }
</style>

App.vue

<template>
    <div>
        <p>{{article}}</p>
        <Helloworld></Helloworld>   <!-- 自定义的组件Helloworld.vue -->
    </div>
</template>
<script>
    <!-- 引入HelloWorld.vue组件 -->
    import Helloworld from './components/HelloWorld.vue'
    
    export default {
        <!-- 需要在当前组件中来定义引入的组件 -->
        components: {Helloworld},
        data() {    //组件化编程必须使用定义data方法
            return {
                article: 'Vue组件间通信'
            }
        }
    }
</script>
<style>
</style>

1.2 定义入口JS文件

import Vue from 'vue'           //引入vue
import App from './App.vue'     //引入自己定义的App.vue，使用变量App来接收

new Vue({
    render: h => h(App),    //将App组件渲染到index.html中
}).$mount("#app")

render是Vue中的一个方法，方法的定义形式如下：

// render最原始的，而传入的参数createElement又是一个函数，用来生成dom结构
render: function(createElement){
    return createElement(模板);
}
// 按照ES6的箭头函数的写法，进行第一次演变
render: createElement => createElement(模板)
// 将上面的createElement变为h，那么就得到最终的形式
render: h => h(App)

$mount("#id")该方法的作用是先实例化Vue对象，接着在挂载到指定Id的节点上

二、 组件通信

2.1 props

父组件向子组件传值

父组件 App.vue

<template>
	<div>
		<h1>Hello World</h1>
		<!-- 前面一个msg标识子组件用于接收的变量名, 引号中的msg是当前组件的值 -->
		<child :msg="msg"/> 
	</div>
</template>
<script>
import child from './Child.vue'
export default {
    components: {
        child
    },
	data() {
        return {
            msg: '这个信息来源于父组件'
        }
	}
}
</script>
<style></style>

子组件 Child.vue

<template>
	<div>
		<p>{{msg}}</p>
	</div>
</template>
<script>
export default {
	// 使用props接收父组件传递过来的值
	props: {  
        msg: String
	}
}
</script>
<style></style>

2.2 事件绑定、监听、取值

2.2.1 子组件操作父组件

通过事件绑定，子组件向父组件传值

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value">
     <hr>
     <Child @dosomething="changeValue"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    changeValue(value) {
      this.value = value;
    }
  }
}
</script>
<style>
</style>

子组件 Child.vue

<template>
    <div>
        <button @click="dosomething">子组件按钮</button>
    </div>
</template>

<script>
export default {
    methods: {
        dosomething() {
        	// 调用父组件绑定的事件 dosomething，然后调用changeValue方法，并传值
            this.$emit('dosomething', '张某人');
        }
    }
}
</script>
<style>
</style>

2.2.2 父组件监听子组件

ref用于组件间引用

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value">
     <hr>
     <Child ref="child"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // 将当前组件中的changeValue方法，绑定到名为changeValue中监听事件中，
    // 子组件通过 this.$emit('changeValue', '张某人') 变会调用父组件的changeValue方法
    this.$refs.child.$on('changeValue', this.changeValue);
  },

  data() {
    return {
      value: ''
    }
  },
  methods: {
    changeValue(value) {
      this.value = value;
    }
  }
}
</script>
<style>
</style>

2.2.3 父组件取子组件中的值

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value">&nbsp;&nbsp;
     <button @click="changeValue">取子组件的值</button>
     <hr>
     <Child ref="child"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    changeValue() {
      this.value = this.$refs.child.value;
    }
  }
}
</script>
<style>
</style>

子组件 Child.vue

<template>
    <div>
        <p>我是子组件，我中间定义了一个value='张某人'的数据</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '张某人'
        }
    }
}
</script>
<style>
</style>

2.3 订阅与发布

  订阅与发布(Publish发布、subscribe订阅)可以应用到各种场景之下，不仅仅是父子组件之间，也可以应用于兄弟组件之间。

安装pubsub-js这个类库：

npm install pubsub-js --save

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value"/>
     <hr>
     <Child ref="child"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
import PubSub from 'pubsub-js'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  mounted() {
    PubSub.subscribe('channel1', (msg, value) => {
      this.changeValue(value);
    });
  },
  methods: {
    changeValue(value) {
        this.value = value;
    }
  }
}
</script>
<style>
</style>

子组件 Child.vue

<template>
    <div>
        <button @click="pub">子组件发布消息</button>
    </div>
</template>

<script>
import PubSub from 'pubsub-js'

export default {
    methods: {
        pub() {
            PubSub.publish('channel1', '张某人');
        }
    }
}
</script>
<style>
</style>

2.4 插槽

  插槽的作用说白了就是一个占位的作用。

父组件 App.vue

<template>
    <List>
    	<!--
    	  可以简写为这种形式
    	  <template #title>
    	-->
        <template v-slot:title>
            <h2>插槽案例</h2>
            <button class="btn btn-danger btn-sm">点击</button>
        </template>
        <!--
    	  可以简写为这种形式
    	  <template #title="props">
    	-->
        <template v-slot:item="props">
            <h3>插槽属性</h3>
            <p>属性值：{{props}}</p>
        </template>
    </List>
</template>

<script>
import List from './components/List.vue'

export default {
    components: {
        List
    }
}
</script>

<style>
    .site-header {
        text-align: center;
    }
</style>

子组件 Child.vue

<template>
    <div>
        <slot name="title"></slot>
        <slot name="item" v-bind="person"></slot> <!-- 组件属性 -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            person: {age: 10, name: 'zhangsan'}
        }
    }
}
</script>
<style>
</style>