Vue 第4天
组件的切换
<component is=""></component> 写死
<component :is=""></component> 可以动态改变
组件的通信
-
父--》子 （通过属性）
1.1 在子组件中声明props，是个数组，在数组中声明用来接收数据的属性的名称
1.2 在父组件中使用子组件的时候，通过在子组件标签中添加 之前声明好的属性，给属性赋值类向子组件传递数据
1.3 在子组件内，就可以像使用正常数据一样使用通过props声明从来的数据这个数据传递过来之后，是单向绑定的，父组件中发生改变，子组件会相应的改变，但是子组件中不允许改变这个数据，就算能改变，父组件中也不会受到影响！
-
子--》父 （通过事件）
本质： 其实就间接的在子组件中调用父组件的方法
1.1 在父组件中声明方法
1.2 在父组件使用子组件的时候，通过事件绑定，将这个方法绑定给子组件 @
1.3 在子组件中，如果想要和父组件通信，只需要触发之前注册好的事件即可(this.$emit)注意： $emit在触发事件的时候，是可以传递参数的，这个参数可以直接在父组件中的函数的形参中接收，但是要注意，只能接收一个参数，所以如果数据较多，则利用对象传递
-
兄弟组件
通过一个全局的vue对象来通信 (是vuex一个简单实现！)
原理： $on $emit1.1 在兄弟组件a中声明方法，
1.2 在全局的vue对象中，注册事件，绑定兄弟组件a中的方法 $on
1.3 如果兄弟组件b需要和兄弟组件a通信，那么只需要在兄弟组件b中触发全局vue对象中的事件 $emit
ref $refs
如果在元素中加上ref属性
1. 该元素是一个普通的dom元素
会将当前的dom元素的dom对象以ref属性的值作为属性名加入到当前元素所在vue实例的$refs对象中去
2. 该元素是一个组件元素
会将当前的元素的组件对象以ref属性的值作为属性名加入到当前元素所在vue实例的$refs对象中去
不常用！
插槽
slot
<mycomp><button></button></mycomp>
Vue.component("mycomp", {
template: "<div> <slot></slot> </div>"
})
具名插槽
<mycomp><button slot="名字"></button></mycomp>
Vue.component("mycomp", {
template: "<div> <slot name='名字'></slot> </div>"
})
路由
路由的基本使用
//1. 引入vue-router.js
//2. 创建组件构造对象
var login = {
template: "<h1>login</h1>s"
}
//3. 创建vuerouter实例 路由对象
var router = new VueRouter({
//4. 在vuerouter对象中 指定路由规则
routes: [
{
//路由路径
path: "/login",
component: login
}
]
})
//5. 将router和vue实例关联起来
var vm = new Vue({
router: router
})
//6. 在视图中指定路由组件显示的位置
//<router-view></router-view>
路由参数
- 通过?传递
?key=value&key=value
获取； this.$route.query - 通过路由规则声明
/login/:id
/login/12
获取: this.$route.params
router-link
这个可以代替a标签， 他会自动的将和当前页面的地址匹配的a标签加上 router-link-active的类样式
<router-link to="/login"></router-link>
<router-link :to="{path: '/login'}"></router-link>
<router-link :to="{name: '路由的名字'}"></router-link>
嵌套路由
var router = new VueRouter({
routes: [
{
path: "/login",
component: login,
children: [
//一定要在上层路由的组件中，为下层路由匹配的组件指定显示位置
//router-view
{
//子路由中的path不能以/开头
path: "xyz",
component: xyz,
}
]
}
]
})
编程式导航（通过js代码进行路由跳转）
this.$router.push("/login")
watch
watch可以用来监听数据的变化
var vm = new Vue({
data: {
shuaige: "zhangzhichao",
meinv: {
name: "刘慧敏",
age: 18
}
},
watch: {
shuaige(nV, oV){
console.log("帅哥发生变化了！")
},
meinv: {
handler: function(nV, oV){
if(nV.age > 20){
console.log("该成亲了！！")
}
},
deep: true,
immediate: true
},
$route: function(){
console.log("路由变化了, 我可以针对路由的变化做一些相对的处理了！！")
}
}
})
