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>