父组件的使用 <SoltTest> <template v-slot:footer>我是插槽头部</template> <template>插槽内容</template> <template v-slot:header>我是插槽尾部</template> </SoltTest> 字组件的使用 <slot name="header"></slot> <slot></slot> <slot name="footer"></slot>
子组件
<slot name="header" :msg="msg">
</slot>
父组件
/**
如果插槽没有名字就是default,slotProps 没有实际意义可以随便写
v-slot:default="slotProps"
*/
<SoltTest> <template v-slot:header="slotProps"> 我是插槽尾部 {{ slotProps.msg}} </template> </SoltTest>
/**动态组件 */ <template> <div> <p @click="showA">展示a组件</p> <p @click="showB">展示b组件</p> <keep-alive> <component :is="currentTabComponent"></component> </keep-alive> </div> </template> <script> import Acomponent from "./Acomponent"; import Bcomponent from "./Bcomponent"; export default { name: "DynamicComponents", data() { return { currentTabComponent: Acomponent }; }, components: { Acomponent, Bcomponent }, methods: { showA() { this.currentTabComponent = Acomponent; }, showB() { this.currentTabComponent = Bcomponent; } } }; </script>
main.js中写入全局指令 Vue.directive("focus", { bind: function (ele) { console.log(ele); return ele.innerText="请输入数据"; }, inserted: function (ele) { ele.focus(); } }) 局部指令 <template> <!-- <input type="text" v-focus> --> <div> <input type="text" v-focus/> <p>局部自定义指定</p> <input type="text" v-localFocus> </div> </template> <script> export default { name:'directive', data(){ return{} }, //自定义局部指令 directives: { localFocus:{ inserted:function(ele){ ele.focus(); } } } } </script>
//main.js中定义全局过滤器 Vue.filter("toCase",function (value) { return value.toUpperCase(); }) /**自定义过滤器 */ <template> <div> 过滤器 <p>{{msg | rmb}}</p> <p>{{message | toCase}}</p> </div> </template> <script> export default { name:"filterTest", data(){ return{ msg: 200, message:"helloword" } }, filters:{ rmb: function(value){ return value+"$" } } } </script>
14.路由
1.基础引入
2.动态路由匹配(路由传递参数)
1.路由配置中添加:path:"/Shop/:id"
2.跳转传递参数:<router-link to="/shop/100233610">商城</router-link>
3.读取参数:{{ this.$route.params.id }}
3.路由嵌套
1.规则
children:[ { path:"java", component:Java }, { path:"web", component:Web } ]
2.注意:路由配置中,不需要给定全部路由,单纯当前路径即可,不需要增加"/"
3.增加二级路由显示位置:<router-view />这个主要显示路由的信息
4.编程式导航(通过编写方法实现页面的一中路由跳转)
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
5.命名路由
6.重定向和别名
redirect
alias
7.路由组件传参参数的解耦 除了{{ this.$route.params.id }}的另外一种读取参数的方式
路由种props为true { path: '/page1/:id', props:true, name: 'page1', component: page1 }, page1页面获取传递的参数 <template> <div> <h1>page1</h1> <!-- // 组件1参数:{{this.$route.params.id}} --> 组件1参数:{{id}} <p>{{msg}}</p> </div> </template> <script> export default { data () { return { msg: "我是page1组件" } }, //props获取路由传递的参数 props:{ id:{ type:[String,Number], default: 0 } } } </script>
props: true
可以使用props传递参数的方案读取路由参数
8.HTML5 History 模式
hash
history
9.高亮显示
router-link-exact-active 绝对高亮显示
router-link-active 相对高亮显示
在App.vue页面中添加.router-link-exact-active 或者.router-link-active <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .router-link-exact-active{ color: red; } </style>