vue组件及路由

女爷i 2021-10-20 01:31 377阅读 0赞

# Vue.js 组件 #

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

![aHR0cHM6Ly93d3cucnVub29iLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wMS9jb21wb25lbnRzLnBuZw][]

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

### 全局组件 ###

所有实例都能用全局组件。

## 全局组件实例 ##

注册一个简单的全局组件 runoob，并使用它：

<div id="app"> 
    <runoob></runoob>
     </div>
     <script> 
    // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' })
     </script>

### 局部组件 ###

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

## 局部组件实例 ##

注册一个简单的局部组件 runoob，并使用它：

<div id="app">
     <runoob></runoob>
     </div> 
    <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>

--------------------

## Prop ##

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

## Prop 实例 ##

<div id="app">
     <child message="hello!"></child> </div> 
    <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{
       { message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) 
    </script>

### 动态 Prop ###

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

## Prop 实例 ##

<div id="app">
     <div> <input v-model="parentMsg"> <br> 
    <child v-bind:message="parentMsg"></child> 
    </div> </div>
     <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{
       { message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) 
    </script>

以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：

## Prop 实例 ##

<div id="app">
     <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
     </ol>
     </div>
     <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{
       { todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } })
     </script>

# Vue.js 路由 #

本章节我们将为大家介绍 Vue.js 路由。

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 [vue-router 库][vue-router]

<div id="app">
      <h1>Hello App!</h1>
      <p>
        
        
        
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      
      
      <router-view></router-view>
    </div>
    
    <script>
    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
    
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在，应用已经启动了！
    </script>

[aHR0cHM6Ly93d3cucnVub29iLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wMS9jb21wb25lbnRzLnBuZw]: /images/20211019/0e3c3ee0d95f49ff8319361470f15eec.png
[vue-router]: https://github.com/vuejs/vue-router