基本操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/vue.js"></script> </head> <body> <div id="app"> <tn></tn> </div> <script> //（子组件） const tnn= Vue.extend({ template:`<div> <h3>hah</h3> <p>hs</p> </div>`, }) //(父组件) const tn2 = Vue.extend({ template:` <div> <h2>2</h2> <h3>2</h3> <!-- //调用子组件--> <tn></tn> </div> `, //组、注册子组件 components:{ tn:tnn, } }) //全局组件 ，可以在多个vue的实例下使用 // Vue.component('tn',tn); new Vue({ el:'#app', data:{ message:'hello', }, //局部组件 components:{ tn:tn2, } }) </script> </body> </html>
语法糖格式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <script src="../../js/vue.js"></script> </head> <body> <div id="app"> <tn></tn> <tnt>{{message}}</tnt> <chiled></chiled> </div> <!--模板分离写法 第一种写法 type="text/x-template"--> <!--《第二种》 写法--> <template id="tn"> <div> <hr> <h2>{{title}}</h2> <h1>{{count}}</h1> <button @click="add">+</button> <button @click="sub">-</button> <!--组件不能访问vue实例的数据 所以vue组件有自己保存数据的S地方 在下面有组件数据储存 --> <hr> </div> </template> <template id="tt"> <h2>child</h2> </template> <script type="text/x-template" id="but"> <div> <h2>2</h2> <h3>2</h3> </div> </script> <script> //全局注册语法糖格式 Vue.component('tn',{ template:/* ` <div> <h2>2</h2> <h3>2</h3> </div> `, but */ '#tn', //在组件对象里面的data也可以有methods等属性，要求data必须是一个函数，必须返回 一个对象，对象内部保存着数据 //这里的 data为什么是一个函数，因为，如果是一个对象，可以对造成数据的连锁反应， data(){ return{ title:'在组件里面的数据', count:0 } }, methods:{ add(){ this.count++; }, sub(){ this.count--; } }, }) new Vue({ el:'#app', data:{ message:'hello', }, components:{ 'tnt':{ template:/* ` <div> <h2>局部组件语法糖</h2> <h3>2</h3> </div> `*/ but, } } }) </script> </body> </html>
通讯：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/vue.js"></script> <style> li{ list-style: none; } </style> </head> <body> <!--案例：父组件通过props 给子组件数据--> <div id="app"> <!--使用组件 cmovies 引用 不能使用驼峰标识，会报错， 如果要用必须在前面加c- --> <cnp :cmovies="movie" :cmessage="message" v-bind:infoshow="info" @btnclick1="sendclick"></cnp> </div> </div> <!-- 注意：使用模板的时候只能有一个div在最外层，--> <template id="tnp"> <div> <h3>{{cmessage}}</h3> <ul> <li v-for=" item in cmovies">{{item}}</li> </ul> <p v-for="(value,key) in infoshow ">{{key}}-{{value}}</p> <button v-for="item1 in categories" @click="btnclick(item1)">{{item1.name}}</button> </div> </template> <script> const cnp={ template:'#tnp', /* props:['cmovies','cmessage'],*/ props:{ //类型限定 /* cmovies:Array,*/ //提供默认值 ,以及必传值 cmessage:{ type:String, default:'默认值', required:true }, cmovies: { type: Array, default() { return [] } }, infoshow:{ type:Object, default() { return {} } } }, data(){ return{ categories:[ {id:1,name:"热门推荐"}, {id:2,name:"手机数码"}, {id:3,name:"好家用电器"}, {id:4,name:"电脑办公"}, {id:4,name:"给父组件传递参数"}, ] } }, methods:{ btnclick(item1){ //告知父组件点击了那个按钮，要发什么数据过来 //自定义事件 // console.log(item1); this.$emit('btnclick1',item1) //注意这里 发的什么的名字接收就要什么名字,不然接收不到 } } } new Vue({ el:'#app', data:{ message:'电影', movie:['f','ds','dsew'], info:{ name:"why", age:12 } }, components:{ cnp:cnp, }, methods: { sendclick (item1) { console.log("d"+item1.name); } } }) </script> </body> </html>
父子组件实现调用数据：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/vue.js"></script> </head> <body> <div id="app"> <cun ref="aaa"></cun> <button @click="sun">an</button> </div> <template id="cun" > <button @click="parent">子组件获取父组件</button> </template> <script> /** * 父组件访问子组件，使用￥children 或refs (在el挂载的引用的标签中写一个ref="aaa") * 然后引用 console.log(this.$refs.aaa.name) * refs对象类型，默认是空 * 子组件访问父组件使用￥parent * 访问根组件 ￥root */ new Vue({ el:'#app', data:{ message:'hello', num1:1 }, methods:{ sun(){ //直接拿到子组件 /* for (let i of this.$children){ console.log(i.name); i.son(); }*/ console.log(this.$refs.aaa.name) } }, components:{ cun:{ template:'#cun', methods:{ son() { console.log('子组件ff') }, parent(){ console.log(this.$parent.message); } }, data(){ return{ name:'子组件', } } } } }) </script> </body> </html>