Vue-笔记(5)

1、父子组件数据传递
    父组件可在引用子组件时, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用。

<com1 v-bind:parentmsg="msg"></com1>

    (1)子组件中,默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
    (2)子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的
        子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上;
    (3)组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的 props 中的数据,都是只读的,无法重新赋值
2、父子组件方法传递
    (1)父组件向子组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了。
    (2)

<com2 @func="show"></com2>
var vm = new Vue({
    el: '#app',
    data: { ... },
    methods: {
        show(data){ ... }
    },
    components: {
        com2
        // com2: com2
    }
});
var com2 = {
    template: '...',
    data(){
        return { ... };
    },
    methods: {
        myclick(){
        this.$emit('func', '参数'); // emit 英文原意: 是触发,调用、发射的意思
        }
    }
};


3、localStorage 只支持存放字符串数据。
4、ref 获取DOM元素和组件
    ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError

<h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3>
console.log(this.$refs.myh3.innerText);

5、路由
    (1)装 vue-router 路由模块
    (2)router-link 默认渲染为一个 a 标签

<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>

    (3)router-view
    router-view --> vue-router 提供的元素,专门用来 当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个 router-view 中去,所以可把 router-view 当做一个占位符。

<transition mode="out-in">
    <router-view></router-view>
</transition>

    (4)创建一个路由对象,当导入 vue-router 包之后,在 window 全局对象中,就有了一个 路由的构造函数,叫做 VueRouter
    在 new 路由对象的时候,可以为 构造函数,传递一个配置对象。

// 组件的模板对象
var login = {
    template: '<h1>登录组件</h1>'
};
var register = {
    template: '<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
    routes: [ // 路由匹配规则 
            { path: '/', redirect: '/login' },
            { path: '/login', component: login },
            { path: '/register', component: register }
    ]
});
// path --> 表示监听 哪个路由链接地址;
// component --> path对应展示的组件,component 的属性值,必须是一个 组件的模板对象, 不能是 组件的引用名称。
var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    router: routerObj // 将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
});

    (5)如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性

<router-link to="/login?id=10&name=zs">登录</router-link>
<!--  $route.query、$route.params -->

    (6)如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性
    // 使用

<router-link to="/login/12/ls">登录</router-link>

    // 路由配置规则

{ path: '/login/:id/:name', component: login },

    (7)路由的嵌套
    使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,否则永远以根路径开始请求,这样不方便我们用户去理解URL地址。   

<router-link to="/account">Account</router-link>
<router-view></router-view>

<template id="tmpl">
    。。。
    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>
    。。。
</template>
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                    { path: 'login', component: login },
                    { path: 'register', component: register }
            ]
        }
    ]
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`vue-property-decorator` 是一个用于在 Vue 中使用装饰器语法的库,它提供了一些装饰器来简化 Vue 组件的开发过程。这些装饰器可以用于定义组件的属性、方法、计算属性、生命周期钩子等。 以下是一些常用的装饰器和它们的用法: - `@Component(options?: ComponentOptions)`:将一个类声明为一个 Vue 组件。可以传入一个可选的 `ComponentOptions` 对象来配置组件选项,例如 `template`、`props`、`computed` 等。 - `@Prop(options?: (Vue.PropOptions | Vue.Constructor[] | Vue.Constructor)[] | Vue.PropOptions)`:定义一个组件的 prop 属性。可以传入一个可选的 `PropOptions` 对象来配置 prop 的类型、默认值等。 - `@Watch(path: string, options?: WatchOptions)`:监听一个属性或表达式的变化,并在变化时执行相应的方法。可以传入一个可选的 `WatchOptions` 对象来配置监听选项,例如 `deep`、`immediate` 等。 - `@Emit(event?: string)`:将一个方法标记为触发事件的方法,并指定要触发的事件名。可以传入一个可选的事件名,默认为方法名。 - `@Ref(refKey?: string)`:获取子组件或 DOM 元素的引用,并将其赋值给指定的属性。可以传入一个可选的引用键,默认为属性名。 - `@Inject(key?: string | symbol)`:注入一个父组件提供的属性或方法。可以传入一个可选的注入键,默认为属性名。 - `@Provide(key?: string | symbol)`:在组件中提供属性或方法,以供子组件注入使用。可以传入一个可选的提供键,默认为属性名。 - `@Model(event?: string, options?: (PropOptions | Constructor[] | Constructor)[] | PropOptions)`:将一个 prop 属性设置为组件的 v-model。可以指定要触发的事件名和 prop 的配置选项。 这些装饰器可以与 `vue-class-component` 一起使用,帮助我们更清晰、简洁地定义 Vue 组件,并提供更好的类型支持和可读性。 希望这些笔记对你有所帮助!如有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值