Vue日记 -- 2

最新推荐文章于 2023-02-26 20:03:13 发布

q6301031

最新推荐文章于 2023-02-26 20:03:13 发布

阅读量145

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/q6301031/article/details/108697175

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue日记 -- 2

组件
路由

组件

组件化开发:整体为一个大组件,通过组件嵌入的方式进行组件化开发,这样同一个组件就可以进行重用,需要更
改时只需修改一处即可
 ** 组件注册(组件模板必须有唯一的根元素)
  全局组件:任何位置均可使用的
  如
          Vue.component('hello-world', {
            data() {
                return {
                    msg: 'helloworld'
                }
            },
            template: `<div>
                <h1>{{msg}}--{{title}}</h1>
            </div>`
        })
  局部组件:只能在定义处的范围内使用,在组件的内部通过components属性来进行定义
  使用时只需以标签的方式引入即可
  如 <hello-world></hello-world>
  ** 命名规则
  可以以 - 或 驼峰式命名,但在标签使用时必须使用 - 的方式,模板内可随意使用
 ** 组件间数据交互
 	** 父向子
 	通过属性绑定的方式在父组件内定义,在子组件内以props属性进行接收使用即可,props数组的key值需和
 	属性值进行一以匹配
 	** 子向父
 	子向父需要通过监听事件的方式来进行数据传递
 	如
 	@click='$emit("事件名","参数")'//子组件事件绑定
 	父组件对此事件进行监听 @事件名='handle($event)' $event接收传递数据
 	** 兄弟组件间
 	通过事件注册中间来完成
 	let hub = new Vue() //定义一个事件注册中心,实质为一个Vue实例
 	如
 	hello2组件
 	            methods: {
                handle: function() {//通过2去触发3
                    hub.$emit('hello3', 3)
                }
            },
            mounted() { //当模板渲染完成就监听该组件
                hub.$on('hello2', (val) => {
                    console.log(val);
                })
            },
	hello3组件
	            methods: {
                handle: function() {
                    hub.$emit('hello2', 2)
                }
            },
            mounted() {
                hub.$on('hello3', (val) => {
                    console.log(val);
                })
            },
 ** 组件插槽
 父组件将内容可以通过插槽方式传递到子组件(放入标签内即可),子组件可以通过<slot>标签进行渲染
 
 具名插槽:子组件<slot>绑定具体的name名,父组件通过标签的slot属性来与子组件进行匹配对应,父组件也可
 通过template标签将一些内容进行包裹传递
 
 作用域插槽:一般用于父组件向子组件传递数据,但子组件需要对此数据进行更改或选择性渲染,这时通常通过
 作用域插槽将数据传回父组件,在父组件内进行数据处理,在以插槽的方式进行渲染到子组件
 子组件通过slot标签属性绑定的方式将数据传回,父组件通过template的slot-scope="slotProps"的方式接
 收到该数据,然后进行处理即可

代码示例
<body>
    <div id="app">
        <hello-world :title='title' :list='list'>
            <template slot-scope="slotProps">
                <strong v-if='slotProps.info.id==2'>{{slotProps.info.name}}</strong>
                <p v-else>{{slotProps.info.name}}</p>
            </template>
        </hello-world>
        <hello-world2 @add-font='handle($event)'>
            <template slot="head">
                <h1>title</h1>
            </template>
            <h1>主题</h1>
            <template slot="foot">
                <h1>foot</h1>
            </template>
        </hello-world2>
        <hello-world3>111</hello-world3>
    </div>
    <script>
        let hub = new Vue()
        Vue.component('hello-world', {
            props: ['title', 'list'],
            data() {
                return {
                    msg: 'helloworld'
                }
            },
            template: `<div>
                <h1>{{msg}}--{{title}}</h1>
                <ul>
                    <li :key='item.id' v-for='item in list'>
                        <slot :info='item'></slot>
                    </li>
                </ul>
            </div>`
        })
        let helloWorld2 = {
            data() {
                return {
                    info: '二号组件'
                }
            },
            template: `<div>
                <h1>{{info}}</h1>
                <button @click='$emit("add-font","子组件传递数据")'>点击</button>
                <button @click='handle'>二号组件点击</button>
                <header>
                    <slot name='head'></slot>
                </header>
                <slot></slot>
                <footer>
                    <slot name='foot'></slot>
                </footer>
            </div>`,
            methods: {
                handle: function() {
                    hub.$emit('hello3', 3)
                }
            },
            mounted() {
                hub.$on('hello2', (val) => {
                    console.log(val);
                })
            },
        }
        let helloWorld3 = {
            template: `<div>
                <button @click='handle'>三号组件点击</button>
                <slot></slot>
            </div>`,
            methods: {
                handle: function() {
                    hub.$emit('hello2', 2)
                }
            },
            mounted() {
                hub.$on('hello3', (val) => {
                    console.log(val);
                })
            },
        }
        let vue = new Vue({
            el: '#app',
            data: {
                title: '父组件传递数据',
                list: [{
                    id: 1,
                    name: '张三'
                }, {
                    id: 2,
                    name: '李四'
                }, {
                    id: 3,
                    name: '王五'
                }]
            },
            components: {
                'helloWorld2': helloWorld2,
                'helloWorld3': helloWorld3
            },
            methods: {
                handle: function(val) {
                    console.log(val);
                }
            },
        })
    </script>
</body>

路由

通过a标签的锚点连接来实现前端页面的跳转,整个网站只有一个单页面
 ** 基本使用步骤
 注册路由:通过VueRouter构造函数来注册
 如:
         let router = new VueRouter({
            routes: [{
                path: '/user',//路由匹配路径
                component: user//此路径所匹配渲染的组件
            }, {
                path: '/regist',
                component: regist
            }, {
                path: '/',
                redirect: '/user'//定义路由重定向
            }]
        })
  在主组件内通过router-link标签来进行跳转 to属性定义路由路径,router-view标签来定义路由占位符,匹
  配的组件将展示在此
  在主组件内router属性来挂载路由
  ** 路由嵌套
  定义路由时通过children属性来定义此路由的子路由
  ** 动态路由和路由传参
          <router-link to='/user/1'>用户1</router-link>
        <router-link to='/user/2'>用户2</router-link>
   类似此方式的路由可采用动态匹配的方式来进行简化,在路由path路径中使用/user/:id的方式来匹配,在组
   件中以$route.params.id来取出数据
   可以通过props的方式来传递数据,在组件中使用props接收即可

代码示例
<body>
    <div id="app">
        <router-link to='/user/1'>用户1</router-link>
        <router-link to='/user/2'>用户2</router-link>
        <!-- 命名式路由 -->
        <router-link :to='{name:"user",params:{id:3}}'>用户3</router-link>
        <router-link to='/regist'>注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        let user = {
            // {{$route.params.id}} 动态路由匹配参数
            props: ['id', 'name', 'age'], //需要与传递参数名进行匹配
            template: `<h1>用户--{{id}}--{{name}}--{{age}}</h1>`
        }
        let regist = {
            template: `<div>
                <h1>注册</h1>
                <router-link to='/regist/tab1'>注册子组件1</router-link>
                <router-link to='/regist/tab2'>注册子组件2</router-link>
                <router-view></router-view>
            </div>`
        }
        let tab1 = {
            template: `<h1>注册子组件内容1</h1>`
        }
        let tab2 = {
            template: `<h1>注册子组件内容2</h1>`
        }
        let router = new VueRouter({
            routes: [{
                path: '/user/:id',
                component: user,
                name: 'user',
                // props: true 开启props路由参数传递
                props: route => ({
                    name: '张三',
                    age: 20,
                    id: route.params.id //取出动态路由参数
                })
            }, {
                path: '/regist',
                component: regist,
                children: [{
                    path: '/regist/tab1',
                    component: tab1
                }, {
                    path: '/regist/tab2',
                    component: tab2
                }]
            }, {
                path: '/',
                redirect: '/user'
            }]
        })
        let vue = new Vue({
            el: '#app',
            router: router
        })
    </script>
</body>

q6301031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue日记 -- 2

Vue日记 -- 2组件路由组件组件化开发:整体为一个大组件,通过组件嵌入的方式进行组件化开发,这样同一个组件就可以进行重用,需要更改时只需修改一处即可 ** 组件注册(组件模板必须有唯一的根元素) 全局组件:任何位置均可使用的如 Vue.component('hello-world', { data() { return { msg: 'helloworld'
复制链接

扫一扫