vue基本语法学习-3

最新推荐文章于 2024-07-19 10:02:14 发布

pin-csdn

最新推荐文章于 2024-07-19 10:02:14 发布

阅读量924

点赞数

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

本文链接：https://blog.csdn.net/gaopinqiang/article/details/107217380

版权

本文介绍了Vue的基本语法，包括设置页面title和icon，全局及局部组件的注册，props的使用以实现父组件到子组件的数据传递，以及动态props的概念。此外，还讲解了自定义事件的运用，通过$on和$emit实现子组件与父组件间的双向通信。

摘要由CSDN通过智能技术生成

先插入2个页面配置的小功能使用
1、设置页面的title
a.在router—index.js中配置路由，加上meta标签，例如：

{
   
    path: '/test_components',
    component: TestMyComponents,
    meta:{
   
      title:"测试自定义组件，指令页面"
    }
}

b.在main.js中配置

/*路由发生变化修改页面title */
router.beforeEach((to, from, next) => {
   
  if (to.meta.title) {
   
	document.title = to.meta.title
  }
  next()
})

测试截图：
在这里插入图片描述

2、设置页面的icon
a.在static目录放置favicon.ico图标（1K左右）
b.在index.html中加上link标签，例如：

<link rel="shortcut icon" href="static/favicon.ico">

在这里插入图片描述
测试截图：

下面继续讲解vue的语法
1、全局组件注册
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
例如：在main.js中配置

// 注册全局组件
Vue.component('my-global-components', {
   
  template: '<h4>自定义的全局组件!</h4>'
})

在TestMyComponents.vue中使用

关注

专栏目录