vue组件
组件的定义
组件实质就是dom片段的封装，把dom片段转化为一个对象，在需要的地方引入，实现共享
组件的简单定义
定义一个组件名为btn，使用时当作普通的标签即可
<btn></btn>
当然这里没有任何功能，只是简单的定义。但是从简单的定义中，了解到组件定义到使用的实现。
组件注册使用是基于vue的component方法的；
组件使用需要声明一个对应的名称；
定义组件是使用template关键字。
----------------------------------------------------------------------------------------
在实际项目中，为了使项目管理模块化、并易维护，需要把这几步拆分开。
定义组件， 每一个组件是一个.vue的文件，文件中使用<template><template>标签定义一个组件，使用es6的语法export导出
<template>
<div>
这是我创建的一个template
</div>
</template>
<script>
export default {
name: "my",
}
</script>
<style scoped>
</style>
在需要的时候导入。这里导出的是一个对象（可以作为component()方法的第二个参数）
在使用组件时必须使用Vue.component()这个方法注册组件。
组件使用方法一
可以把组件在main.js里注册，成为全局的组件， 在项目中任何一个地方都可以调用
组件使用方法二
通过路由使用组件
如果是在路由router中使用，路由中语法设置是把组件对象设置为component的属性值。
// 在router下的index.js文件中使用
import my from '../components/my'
export default new Router({
routes: [
{
path: '/',
name: 'h',
component: HelloWorld
}
]
})
这样就可以通过路由的语法规定使用组件，例如使用<view-router/>或是<router-link>控制组件的使用
// 全局组件在项目中任何地方都可以使用
组件之间传值，子组件和父组件之间传值
父组件向子组件传值
----- 子组件不仅可以获取父组件的数据，还可以获取父组件的方法。 当然是绑定到子组件上的数据和方法。
父组件
数据可以是动态获取的，也可以是静态的。
子组件
使用 props接收父组件传递过来的值， 这个属性是一个数组。 对数据的处理，传入的可能是复杂的数据类型，对接收的数据进行处理。
数据可以是动态获取的，也可以是静态的。
// 父组件
<template>
<div id="app">
<!--title是可以动态绑定， name是静态数据, run是传递一个方法-->
<head-nav :title="title" :run="run" name="标题"></head-nav>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
title: '我是一个参数' // 这是一个动态变量
}
},
methods: {
run(){
alert('我是父组件的中的方法');
}
}
}
</script>
// 子组件
<template>
<div>
{{title}}
{{name}}
<button @click="run">点击呀</button>
<button @click="getMsg">获取父组件传的信息</button>
</div>
</template>
<script>
export default {
name: "headNav",
data () {
return {}
},
methods: {
getMsg() {
console.log(this)
console.log(this.run)
console.log(this.title)
console.log(this.name)
}
},
props: ['title', 'name', 'run']
}
</script>
输出结果
在子组件中通过props接收父组件的参数，也就在父组件中子组件v-bind绑定的变量名或是直接使用静态名
///////同一个子组件，在不同的父组件中使用，父组件传递不同的值，子组件显示的内容也会不同
子组件向父组件传值
先创建一个vue中间对象
子组件 是使用 vm.$emit() 触发当前实例上的事件。传出数据
<button @click="btnClick">子组件</button>
methods: {
btnClick () {
connect.$emit('test', ' 子组件向父组件传递数据 ')
}
}
Vue.$on 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
父组件接收数据
<button @click="btnClick">父组件button</button>
methods: {
btnClick () {
connect.$on('test', function (msg) {
console.log(msg)
})
}
}
