vue4

作者: 生活是什么呢 | 来源:发表于2017-11-25 10:39 被阅读0次

Vue 第4天

组件的切换

<component is=""></component> 写死
<component :is=""></component> 可以动态改变

组件的通信

  1. 父--》子 (通过属性)
    1.1 在子组件中声明props,是个数组,在数组中声明用来接收数据的属性的名称
    1.2 在父组件中使用子组件的时候,通过在子组件标签中添加 之前声明好的属性,给属性赋值类向子组件传递数据
    1.3 在子组件内,就可以像使用正常数据一样使用通过props声明从来的数据

    这个数据传递过来之后,是单向绑定的,父组件中发生改变,子组件会相应的改变,但是子组件中不允许改变这个数据,就算能改变,父组件中也不会受到影响!

  2. 子--》父 (通过事件)
    本质: 其实就间接的在子组件中调用父组件的方法
    1.1 在父组件中声明方法
    1.2 在父组件使用子组件的时候,通过事件绑定,将这个方法绑定给子组件 @
    1.3 在子组件中,如果想要和父组件通信,只需要触发之前注册好的事件即可(this.$emit)

    注意: $emit在触发事件的时候,是可以传递参数的,这个参数可以直接在父组件中的函数的形参中接收,但是要注意,只能接收一个参数,所以如果数据较多,则利用对象传递

  3. 兄弟组件
    通过一个全局的vue对象来通信 (是vuex一个简单实现!)
    原理: $on $emit

    1.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>

路由参数

  1. 通过?传递
    ?key=value&key=value
    获取; this.$route.query
  2. 通过路由规则声明
    /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("路由变化了, 我可以针对路由的变化做一些相对的处理了!!")
        }
    }
})

相关文章

  • vue4

    Vue 第4天 组件的切换 组件的通信 父--》子 (通过属性)1.1 在子组件中声明props,是个数组,在数组...

  • Vue环境安装

    查看Vue安装版本 npm list -g -depth 0 安装Vue4 npm install -g @vue...

  • 【Vue4】组件使用的细节点

    组件使用的细节点,不是讲组件化,不是讲组件化,不是讲组件化。重要的事情说三遍,罒ω罒本来觉得这个自己看一遍就算了,...

网友评论

      本文标题:vue4

      本文链接:https://www.haomeiwen.com/subject/htaqbxtx.html