Vue组件
Vue组件介绍
组件：
html、CSS、js的集合体，可以为该集合命名，在html中使用
组件的分类：
根组件：new vue() 创建的组件
局部组件：组件名 = {},{}内部采用vue语法
全局组件：vue.component('组件名',{}),{}内部采用vue语法
组件的特点：
1. 组件都有管理组件html页面结果的template实例成员，template中只有一个根标签
2. 根组件作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件
3. 子组件数据隔离，每个组件拥有自己的独立名称空间
4. 局部组件必须注册后才可以使用
5. 全局组件在声明的时候全局注册
6. 组件中出现的所有变量，由该组件自己管理
7. 根组件、局部和全局组件都是一个vue实例，实例就是组件
总结
根组件明确template实例成员后，默认采用挂载点页面结构，
如果设置了template，挂载点内部的内容将会被替换，原来的内容将无效，可以不用明确template
html、body标签不能为替换，所以不能作为挂载点
组件编写
每个组件都有vue的实例成员：template、methods
关键字：template
根组件：
<script>
let app = new Vue({
el: '#app',
data: {
msg:'组件信息'
},
// 在vue根组件中template可写可不写
template:`<p>{{msg}}</p>`
})
</script>
局部组件：
<script>
// 定义局部组件，必须注册之后才能使用
let localtag1 = {
template:
`
<div class="box" @click="fn">
<h1>帅哥</h1>
</div>
`,
methods:{
fn(){
console.log(this)
}
}
}
let app = new Vue({
el: '#app',
data: {},
// 在使用局部组件的时候，必须要注册之后才能使用
components:{
// 当注册的时候你的key与变量值一样的时候
// 就可以直接简写为localtag.
localtag1,
}
})
</script>
全局组件：
<script>
// 定义全局组件的时候全局注册
Vue.component('localtag2',{
template:
`
<div class="box" @click="fn">
<h1>美女</h1>
</div>
`,
methods:{
fn(){
console.log(this)
}
}
})
</script>
在页面上使用
<div id="app">
<localtag1></localtag1>
<localtag2></localtag2>
</div>
组件化
一个组件可能会被复用多次，在每个组件中应该都有自己的名称空间
在每个组件中定义data，即可给每个组件中变量设置值
// 数据需要组件化，每个组件中的点击事件都有自己对应的methods实例成员
// 作为方法的返回值（方法执行后会产生一个名称空间）
data(){
return {
count:0,
}
},
组件间传值-父传子
现在想要实现在父组件中传入子组件的变量，可以使用自定义属性的方式，然后在子组件中定义props实例成员
关键字：props
<div id="app">
<!-- 子组件在渲染的时候，可以使用自定义属性的方式，将变量传入子组件 -->
<localtag1 v-for="people in peoples" :people="people" def="12345" :xyz="people.name"></localtag1>
</div>
// 定义全局变量，这个变量可能从后端Django传过来。
let peoples = [
{name:'帅哥1号'},
{name:'帅哥2号'},
{name:'帅哥3号'},
{name:'帅哥4号'},
]
// 定义局部组件，必须注册之后才能使用
let localtag1 = {
// 子组件通过props自定义组件属性（采用反射的机制，填写字符串，使用的时候可以直接作为变量）
// 子组件在父组件中渲染，渲染时将父组件的变量传入子组件的自定义属性，就可以将变量传入子组件中。
props:['people','def','xyz'],
template:
`
<div class="box" @click="fn">
<h1>点击了{{people.name}} {{count}} 下</h1>
</div>
`,
// 一个组件可能会被复用多次
// 在每个组件中应该都有自己的名称空间
// 在每个组件中定义data，即可给每个组件中变量设置值
data(){
return {
count:0,
}
},
// 数据需要组件化，每个组件中的点击事件都有自己对应的methods实例成员
// 作为方法的返回值（方法执行后会产生一个名称空间）
methods:{
fn(){
console.log(this);
//
this.count++;
}
}
}
let app = new Vue({
el: '#app',
// 在根组件中有自己的变量dogs
// 现在将它传入子组件中
data: {peoples},
components:{
// 当注册的时候你的key与变量值一样的时候
// 就可以直接简写为localtag.
localtag1,
}
})
组件间传值-子传父
通过在父组件中传入子组件的变量，可以使用自定义属性的方式，然后在子组件中定义props实例成员
那么在子组件中可不可以将变量传入父组件呢？可以，看下面。
关键字：this.$emit('自定义的事件名',this.t1)
通过在组件中自定义事件，在子组件中手动触发这个事件，并且将子组件中的数据带出去，带到父组件中的方法变量中，
父组件的方法变量会接收到值（子组件带出去几个值父组件就能接收几个值。），然后通过父组件方法进行数据操作。
<tag2 @h1a="aFn1" @h2a="aFn2"></tag2>
let tag2 = {
template: `
<div>
主标题内容：<input type="text" v-model="t1" @input="t1Fn">
子标题内容；<input type="text" v-model="t2">
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
// 通过事件绑定的方式将数据传到父组件中
t1Fn(){
this.$emit('h1a',this.t1)
}
},
// 通过vue实例成员的监听属性将数据传出去
watch:{
t2(){
this.$emit('h2a',this.t2);
}
}
}
let app = new Vue({
el: '#app',
data: {
h1: '主标题',
h2: '子标题',
},
methods: {
aFn1(a){
if (!a){
this.h1 = '主标题'
return;
}
console.log('dsdsdd',a)
this.h1 = a;
},
aFn2(a){
if (!a){
this.h2 = '子标题';
return;
}
console.log('aFn2',a)
this.h2 = a;
}
},
components: {
tag2,
}
})
Vue基础知识总结：
组件：
- 组件概念：
- 根组件：
- 组件传参：
- 父传子：自定义组件属性；
- 子传父：自定义组件事件；
实例成员：
- el、data、methods、computed、watch、filters、delimters、props、template、components
指令：
- {{}}、v-text、v-html、v-once、v-model、v-bind、v-if|v-else-if|v-else、v-for、v-cloak
