vue组件入门知识全梳理
(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )
组件
概念：template是入口组件，那么挂载在template下的组件是入口组件的子组件
局部组件
三步口诀：声子，挂子，用子
- 声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象
- 把组件挂载到入口文件的components对象中。
- 在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签
全局组件
Vue.component(name,options)
第一个参数是组件的名称
第二个参数是组件的对象
注意全局组件要在创建Vue实例化对象前，否则会报错
// 全局组件(要在创建Vue实例之前)
Vue.component('Vbtn', {
template: `<button>全局按钮组件</button>`
})
// 1、创建一个入口组件
// 2、创建头部组件，侧边栏组件和内容组件
var Heard = {
template: `
<div>
<h2>我是头部组件</h2>
<Vbtn></Vbtn>
</div>
`
}
var Aside = {
template: `
<div>我是侧边栏组件</div>
`
}
var Content = {
template: `
<div>我是内容组件</div>
`
}
var App = {
template: `
<div class="main">
<Heard class = "heaed"></Heard>
<div class="main2">
<Aside class="aside"></Aside>
<Content class="content"/>
</div>
</div>
`,
components: {
Heard,
Aside,
Content
}
}
new Vue({
el: "#app",
data() {
return {
msg: "这是测试"
}
},
template: `
<App></App>
`,
components: {
App
}
});
组件深入
问：为什么要通过父亲获取数据，在传递到子组件呢？
答：通过父亲向后端获取数据，然后在分发到各组件可以减少后端的交互，不然各个组件都向后端发送请求影响性能
见下图：
父子组件传值（父传子）
1、父 用子 时通过 绑定自定义属性 传递，
2、子要 声明 props:['属性']接收父绑定的自定义属性
3、收到就是自己的随便用
在template中直接使用 在js中this.属性名
小补充：绑定自定义属性时：常量传递直接用，变量传递加冒号
总结父传子
父用子：先声子、挂子、用子
父传子：父传子（属性）、子声明（接收）、子使用
子传父
1、父 用子 绑定 自定义事件
2、子触发自定义事件：this.$emit()
第一个参数是**自定义事件名** 第二个参数是**传递进去的值** 
全局组件的数据传递 1、通过VUE内置组件slot分发内容
原因：如果不使用slot无法修改全局组件的内容
作用：slot元素作为承载分发内容的出口
2、父子传值
自定义属性传递常量直接使用不需要加冒号
如果要触发原生的事件需要通过 @原生事件名.native调用
3、具名插槽
在子组件中声明使用vue的内置组件：
<slot name = "one"></slot>
父组件中调用
<h2 slot= "one"></h2>
这样做的目的：可以一条数据一个坑，数据不会乱了
附加功能
1、过滤器filters
1、作用:对当前数据添油加醋
2、语法：声明在组件内使用filters对象，返回一个函数，函数一定要有返回值
3、调用：template中调用过滤器：数据属性|过滤器名字
var Content = {
template: `
<div>
<input type = number v-model = "msg"/>
<h2>{{msg|RmbData}}</h2>
</div>
`,
data(){
return{
msg:10
}
},
filters:{
RmbData(value){
return '$'+value
}
}
}
生命周期
总结
下一篇：Ajax获取node服务器数据的完整步骤