最近这几天一直看Vue视频 ，看的黑马的视频，讲的特别杂，既有Vue基础知识，Webpack，VueUi框架.....等等吧，很乱，学起来也特别费力，而且我还不知道，在视频后面的API也过期了（去了官方才知道），只能学到一半不能继续了，是不是特别坑！
最近找了一套去哪儿网页APP，这个还讲的可以，今天可算把子组件父组件可搞明白了，以及子组件与父组件之间 的传值，还有零碎的知识点，做个总结，以便忘了，也希望能帮到你。
废话不多说，代码走起！
什么是子组件?父组件？
看了很多文章始终没明白，看了讲解子父组件视频，可算搞懂了.其实很简单，最重要的时它们父与子之间的传值
子组件
当你创建一个组件时，那个组件名就是子组件
var option = Vue.extend({
props:['content','index'],
template:'<li @click="sendFather">{{content}}</li>'
})
Vue.component('item',option)//这个item就是子组件
AI 代码解读
父组件
当你 创建一个Vue实例时， el需绑定div，那么这个div就是父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="Vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="fade"> <!-- fade就是父组件 -->
</div>
</body>
</html>
<script>
var ss = new Vue({
el:"#fade"
})
</script>
AI 代码解读
组件的注册
第一种方法
Vue.component('组件名',{
props://这个位置是为子组件定义属性
// 在子组件中定义data时，data必须是一个函数，返回一个对象
data:function(){
return(){
}
}
})
AI 代码解读
第二种方法
//通过Vue.extend({})创建子组件构造器(extend) 传参，
Vue.component('item',option)
//然后通过component(组件名，通过extend创建的变量引入
var option = Vue.extend({
props:['content','index'],
template:'<li @click="sendFather">{{content}}</li>'
})
Vue.component('item',option)
AI 代码解读
另外，组件创建还有两种创建方式：
- 全局注册（组件可以在页面中任何位置都可以使用）
- 局部注册（组件只能在Vue实例里面使用，不可以在别的Vue实例中使用）
template的作用
<!-- template 的作用只是起包裹元素，它不会被渲染到页面上去 -->
<template v-for="dd of xiaomi">
<h1>?{{dd.name}}-----------?{{dd.prise}}}</h1>
</template>
AI 代码解读
动态改变对象数据的方法
第一种方法：改变引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="Vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="fade">
<template >
<h1 v-for="list of obj">{{list}}</h1>
<!-- 添加一个方法，当点击button时，就会增加一个属性 -->
<button @click="add">添加对象属性</button>
</template>
</div>
</body>
</html>
<script>
var ss = new Vue({
el:"#fade",
data:{
obj:{
name:"张三",
age:20
}
},
methods:{
add:function(){
//直接复制原有的基础上，+新的属性
ss.obj={
name:"张三",
age:20,
hobby:"打?"
}
}
}
})
</script>
AI 代码解读
第二种方法：Vue.set（实例.对象,'新增的属性'，‘值’）
<script>
var ss = new Vue({
el:"#fade",
data:{
obj:{
name:"张三",
age:20
}
},
methods:{
add:function(){
//通过这行代码新增一个属性
Vue.set(ss.obj,"hobby","打?")
}
}
})
</script>
AI 代码解读
第三种方法：实例.$set（实例.对象,'新增的属性'，‘值’）
<script>
var ss = new Vue({
el:"#fade",
data:{
obj:{
name:"张三",
age:20
}
},
methods:{
add:function(){
//通过这行代码新增一个属性
ss.$set(ss.obj,"hobby","打?")
}
}
})
</script>
AI 代码解读
动态改变数组数据的方法
1.Vue.set(实例,数组,索引,替换内容)
2.实例.$set(实例,数组,索引,替换内容)
3.数组的一些方法pop.......
4.改变引用
AI 代码解读
子组件向父组件传值
1.在子组件种通过this.$emit(A事件)向父组件传递值
2.然后父组件在子组件标签中绑定监听事件A， A事件=“B事件”
3.然后通过在父组件的methods中处理B事件，**获取子组件内容**
AI 代码解读
如何获取子组件内容呢？
this.$refs.这个位置是在子组件中定义的ref名.要获取的值r+this.$refs.这个位置是在子组件中定义的ref名.要获取的值;
// 求子组件的和
this.count = this.$refs.one.number+this.$refs.two.number;
AI 代码解读
如何获取DOM节点呢？
通过在元素身上定义 ref='xxxxx'， 然后通过this.$refs.xxxx
AI 代码解读
获取节点内容
this.$refs.ref名.innerHTML
AI 代码解读
获取子组件值
this.$refs.ref名.要获取的值
AI 代码解读
组件注意细节
有些时候模板渲染会出问题，在table，ul，select中，使用组件时，你可以在便签上 写 is=“组件名”，这样它在页面显示就不会出现问题！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="Vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="fade">
<table >
<!-- is 解决子组件在table，ul，select中显示标签的问题 -->
<tr is="item"></tr>
</table>
</div>
</body>
</html>
<script></script>
AI 代码解读
