1.借助Vue.extend()方法创建组件 注意点
var Aaa = Vue.extend({
template: "<h1>这是标题</h1>"
});
// 全局组件
var aaa = Vue.component("aaa", Aaa); // 注意，这里是Aaa
// 局部组件
new Vue({
el: ".app",
components: {
aaa: Aaa // 注意，这里是Aaa，相当于构造函数，不是对象
}
});
2.子组件使用父组件的数据。（借助标签属性传值）
<body>
<div id="app">
<ul v-for="k in musics">
<li><span>{{k.name}}</span>____<span>{{k.singer}}</span></li>
</ul>
<!-- 1.根组件内数据 通过属性 传给子组件（注意：驼峰命名的js，对应-命名的标签名） -->
<most-hot-music :a="hotMusicName" :b="hotMusicSinger"></most-hot-music>
</div> <template id="mostHotMusicTeml">
<div>
<div>
<!-- 3.子组件 展示接收过来的 根组件数据 -->
<p>{{a}}</p>
<p>{{b}}</p>
</div>
</div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// mostHotMusec组件要使用父组件的hotMusicName/hotMusicSinger两个值
new Vue({
el: "#app",
data: {
musics: [
{
name: "隐形的翅膀",
singer: "张韶涵"
},
{
name: "中国话",
singer: "SHE"
},
{
name: "青春修炼手册",
singer: "TFboys"
}
],
// 要展示在子组件的值
hotMusicName: "隐形的翅膀",
hotMusicSinger: "张韶涵"
},
components: {
mostHotMusic: {
template: "#mostHotMusicTeml",
// 2.子组件 通过属性 接收父组件传过来的数据
props: ["a", "b"],
}
}
});
</script>
</body>
3.父组件使用子组件数据（借助事件，需要子组件主动触发，父组件监听）
<body>
<div id="app">
<div id="stage" style="height:50px;line-height:50px;background:blue;color:#fff;"></div>
<!-- 注意：事件名不能用驼峰命名法，否则传不过去，要用“-”分隔 -->
<!-- 2.根组件监听到send-event事件，获得数据（参数中） -->
<child @send-event="showChildData"></child>
</div>
<template id="childTeml">
<div>
<button @click="send" style="margin: 20px">向父组件发送数据</button>
</div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
methods: {
// 根组件监听事件
showChildData(data){
document.querySelector("#stage").innerHTML = data;
}
},
components: {
child: {
template: "#childTeml",
data: function(){
return {
// 要传递给根组件的数据
childComponentName: "abchahaha"
}
},
methods: {
send(){
// 1.子组件触发send-event事件，传递数据（emit：发射）
this.$emit("send-event",this.childComponentName);
// 发射 事件名 数据
}
}
}
}
})
</script>
</body>
4. .vue单文件组件及vue-router
webpack正确解析.vue，需要vue-loader / vue-template-compiler
(1)需要有一个根组件，组建名官方推荐首字母大写。
** 注意推荐是首字母大写，我这里写的不规范。
（2）根组件 App.vue
<template>
<div class="main">
<router-link to="/login" class="login">登录</router-link>
<router-link to="/reg" class="res">注册</router-link> <router-view></router-view>
</div>
</template>
<script>
export default {
data:function(){
return { };
},
methods: { }
}
</script>
<style scoped> // scoped表示局部，只在本组件中起作用 </style>
（3）入口文件 index.js
// 引包，node会去node_module中找，与文件夹名一致；
// vue-router下载后不用配置
import Vue from "vue";
import vueRouter from "vue-router"; // 这一句不写，会报错 标签router-link组件是不是没有正确注册
Vue.use(vueRouter); // 引入根组件和子组件
import App from "./app.vue";
import login from "./components/login.vue";
import reg from "./components/reg.vue"; // 定义路由匹配规则
const router = new vueRouter({
routes: [
{
path: "/login",
component: login
},
{
path: "/reg",
component: reg
}
]
}) new Vue({
el: ".app",
render: c=>c(App), // 渲染根组件
router
});
(4) login.vue登录组件，注册组件与他类似
<template>
<div>
<span>{{msg}}</span>
</div>
</template> <script>
export default {
data(){
return {
msg: "登录组件"
}
}
}
</script> <style scoped>
div {
background: blue;
color: white;
line-height: 50px;
text-align: center;
}
</style>