使用Vue

目录

1.main.js 文件

1.1.一个组件引用另一个组件

1.1.1.当前组件中导入另一个组件

1.1.2.注册另一个组件  

1.1.3.使用注册的组件

2.父组件如何向子组件传值

2.1.当前组件中导入另一个组件

2.2.注册另一个组件

2.3.使用注册的组件

3.路由的用法

---

1.main.js 文件

1.1.一个组件引用另一个组件

1.1.1.当前组件中导入另一个组件

import hello from './components/Hello.vue'

1.1.2.注册另一个组件  

export default {
  name: 'app',
  //(2)注册组件
  components: {
     hello
  }
}

1.1.3.使用注册的组件

<!--(3)使用组件-->
<hello></hello>

2.父组件如何向子组件传值

2.1.当前组件中导入另一个组件

/*

*import 别名 from '组件路径'

*/

import hello from './components/Hello.vue'

 2.2.注册另一个组件

export default {

        name: 'app',

        //(2)注册组件

        components: {

                // HelloWorld

                hello

        },

        data(){

                return {

                        "name":"张三"

                }

        }       

}

2.3.使用注册的组件

<!--(3)使用组件

       此处使用别名hello 在子组件中props中定义该名称

-->
<hello :msg="name"></hello>

 在子组件中使用（在components下创建Hello.vue子组件，与上边的组件路径一致）

<template>
    <div>

        <!--子组件调用-->
        你好,李焕英{{msg}}
    </div>
</template>

<script>
    export default {
        name: "Hello",

        //子组件的prop方法
        props:{
            msg:String
        }
    }
</script>

<style scoped>

</style>

3.路由的用法