什么是组件？
组件是可复用的 Vue 实例,我们可以通过组件的使用来减少 Vue 实例的代码量。利用不同的组件划分不同的功能模块,我们可以通过调用组件实现相应的功能。
组件的创建
我们可以像这样创建全局组件
// 使用 Vue.extend 来创建全局的 Vue 组件
var component1 = Vue.extend({
// 通过 template 属性，指定了组件要展示的 HTML 结构
template: "<h3>这是使用Vue.extend创建的组件</h3>"
});
// 使用 Vue.component('组件的名称'，创建出来的组件模板对象) 注册
Vue.component("myCom1", component1);
像这样使用
<my-com1></my-com1>
注意：
W3C 标准：标签名，属性名一律不准使用大写、大小写混拼。我们在注册的时候可以用小驼峰 myCom1，但是在使用的时候应该改成 my-com1
自然地，我们也可以像这样创建组件
<!-- 省掉中间变量 -->
Vue.component('myCom1', Vue.extend({
template: '<h3>这是使用Vue.extend创建的组件</h3>'
}))
或者像这样
<!-- 把 Vue.extned 省略 -->
Vue.component('myCom2', {
// 注意不论是那种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素
// 所以，我们在这里加了个 div 包上
template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
})
但是像这样的话，一大段模板都不会出现提示，所以可以这样
Vue.component("myCom3", {
// template 的 id
template: "#tmp1"
});
然后定义模板
<template id="tmp1">
<div>
<h3>这是通过 template 元素，在外部定义的组件结构</h3>
<input type="text" />
</div>
</template>
以上都是全局组件，实际上我们可以定义私有的,使用的时候注意作用区域
var vm2 = new Vue({
el: "#app2",
data: {},
methods: {},
components: {
// 定义实例内部私有组件
login: {
template: "#tmp1"
}
}
});
组件中的 data
data 必须是个函数
Vue.component("myCom1", {
template: "<h3>这是一个组件：{{ msg }}</h3>",
data: function() {
return {
// 用这种方式来返回数据
msg: "这是组件中定义的数据"
};
}
});
Q: 那么，组件酱中的
data为什么一定要是个函数？
A: 这样规定，每个实例化的组件的数据都有一个自己的作用域，防止同种组件实例 A 数据的改动的同时影响同种组件实例 B 的数据
利用 <component> 控制组件的切换
在页面中的一个地方，我们可以利用 <component> 占位符来控制组件的切换(一个直观的例子：页面的登录框和注册框的切换)
以防万一，贴上代码
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- Vue 提供了 component 来展示对应名称的组件 -->
<!-- component 是一个占位符 -->
<!-- :is 属性可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
comName: 'login' // 绑定的组件的名称
}
})
</script>
p.s. 如果想要在切换的时候加上动画，就像之前一样，套上一层 <transition> 标签，写上相应的样式即可
使用 prop 父组件向子组件传值
我们现在有个 Vue 实例, Vue 实例有个私有的组件 com1
var vm = new Vue({
el: "#app",
data: {
msg: "123----父组件中的数据"
},
methods: {},
com1: {
// 子组件的 data 数据并不是通过父组件传递过来的，而是子组件自己私有的，
// 比如：子组件通过 Ajax 请求回来的数据，都可以放到 data身上
// data 上的数据 可读可写
// props 上的数据 可读，不建议修改
data: function() {
return {
title: "123",
content: "aaa"
};
},
// 子组件默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
template: '<h1">这是子组件{{ parentmsg }}</h1>',
// 组件中所有 props 中的数据，都是通过父组件传递给子组件的
props: ["parentmsg"], // 将父组件传递过来 parent 属性，现在 props 数组中定义一下才能使用这个数据
methods: {
change() {
this.parentmsg = "被修改了";
}
}
}
});
对于我们要使用的数据，在 html 用 v-bind 绑定如下，然后将绑定好的属性 parentmsg 添加进子组件 com1 的属性 props 列表中，即可在子组件中使用
关于 props 更多信息点击这里
<div id="app">
<!-- 父组件可以在引用子组件的时候，通过属性绑定 (v-bind)的形式将需要的传递给子组件的数据
以属性绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 :parentmsg="msg"></com1>
</div>
父组件向子组件传递 methods
我们有一个 Vue 实例 vm ，它有个子组件 com1 ，vm 中即将被调用的函数为 show 函数，对此我们在 html 中用 v-on 绑定
<div id="app">
<!-- 父组件向子组件传递方法 使用的是事件绑定机制 v-on，当我们自定义一个事件属性之后，那么子组件就能够
通过某些方式来调用传递进去的方法 -->
<com1 @func="show"></com1>
</div>
在子组件中的方法 myClick 中，用 $emit 触发这个函数
<script>
// 定义了一个字面量类型的组件模板对象
var com1 = {
data() {
return {
sonMsg: { name: 'son', age: 6 }
}
},
template: '#tmp1', // 这个模板
methods: {
myClick() {
// 点击子组件按钮的时候，如何拿到父组件传递过来的 func 方法，并调用这个方法
this.$emit('func', this.sonMsg)
}
}
}
var vm = new Vue({
el: "#app",
data: {
msgFromSon: ''
},
methods: {
show(data) {
console.log("调用了父组件的 show 方法 --- " + data)
console.log(data)
this.msgFromSon = data
}
},
components: {
com1
}
})
</script>
另外值得注意的一点，这个结构也可以完成子组件向父组件传值，在父组件被调用的方法 show 中，留下一个引用 data ,可以用 $emit 函数的第二个及以后的参数，传回父组件。
利用 ref 获取 DOM 组件和元素
<div id="app">
<input type="button" value="getElement" @click="getElement" ref="mybtn">
<h3 ref="myIndex">今天天气不错</h3>
<hr>
<!-- 这个子组件哦 -->
<login ref="myLogin"></login>
</div>
在父组件中定义的函数：
getElement() {
console.log(this.$refs.myIndex.innerText)
console.log(this.$refs.myLogin.msg)
this.$refs.myLogin.show() // show 为在子组件中定义的方法
}
如有不足请指正，谢谢！
