Vue组件化开发 组件通信父子组件传值

1.Vue组件化的基本使用 基本使用，不简化的

<div id=“app”> //3.使用组件 <a-cpn></a-cpn> </div> <script src="../js/vue.js"></script> <script> //1.创建组件构造器对象 const cpnC=Vue.extend({ //``倒引号 模板字符串 es6中``定义字符串 换行的时候可以直接写 template:` <div > <h2>我是标题</h2> </div> ` )} //2.注册组件（全局组件） Vue.component('a-cpn',cpnC) //引号中填组件的标签名 let app=new Vue({ el:'app', data:{ } )} </script>

2.全局组件和局部组件

全局组件 能在所有Vue实例中使用 //第一个VUE实例 <div id=“app”> <a-cpn></a-cpn> </div> //第二个VUE实例 <div id=“app2”> <a-cpn></a-cpn> </div> <script src="../js/vue.js"></script> <script> //1.创建组件构造器对象 const cpnC=Vue.extend({ template:` <div > <h2>我是标题</h2> </div> ` )} Vue.component('a-cpn',cpnC) let app=new Vue({ el:'app', data:{ } )} let app2=new Vue({ el:'app', data:{ } )} </script> 局部组件 <div id=“app”> <a-cpn></a-cpn> </div> <script src="../js/vue.js"></script> <script> const cpnC=Vue.extend({ template:` <div > <h2>我是标题</h2> </div> ` )} let app=new Vue({ el:'app', data:{ } )} let app2=new Vue({ el:'app', data:{ }, components:{ cpn:cpnC } )} </script>

3.父组件和子组件

<div id=“app”> <a-cpn></a-cpn> </div> <script src="../js/vue.js"></script> <script> //cpnC1是子组件 const cpnC1=Vue.extend({ template:` <div > <h2>我是标题1</h2> </div> ` )} //cpnC2是父组件 const cpnC2=Vue.extend({ template:` <div> <h2>我是标题2</h2> <cpnC1></cpnC1> </div> `, components:{ cpnC1:cpnC1 } }) //root根组件 let app=new Vue({ el:'app', data:{ }, components:{ cpn2:cpnC2 } )} </script>

4.注册组件的语法糖

全局组件 <div id=“app”> <a-cpn></a-cpn> </div> <script src="../js/vue.js"></script> <script> Vue.component('a-cpn',{ template:` <div> <h2>我是标题</h2> </div> ` }) let app=new Vue({ el:'app', data:{ } )} </script> 局部组件 let app=new Vue({ el:'app', data:{ }, components:{ cpn2:{ template:` <div> <h2>我是标题</h2> </div> ` } } )}

5.不用脚手架的 模板分离写法

<!--1.通过script标签，注意type="text/x-template"--> <script type="text/x-template" id="cpn"> <div> 组件内容 </div> </script> <!--2.template标签--> <template id="cpn"> <div> 组件内容 </div> </template> <script src="../js/vue.js"></script> <script> Vue.component('a-cpn',{ template:'#cpn' }) </script >

6.组件数据的存放

Vue.component('a-cpn',{ template:'#cpn', data(){ return{ title:'abc' } } })

7.组件中的data为什么是一个函数 每个组件需要独立的保存数据的地方，如果是个obj那么一个组件重复使用多次，更改某一个值，所有使用这个组件的数据将都会被改变。方法则不会。

8.父子组件的通信 子组件不能直接引用父组件或者Vue实例里面的数据 通过props向子组件传递数据 通过自定义事件向父组件发送消息 $emit

1）父组件向子组件传值 prop基本用法

<div id="app"> <cpn :cmovies="movies" :cmessage="message"></cpn> //把子组件的属性，绑定上父组件的值（自己理解的不知道对不对） </div> //模板 不会显示 <template id="cpn"> <div> <p>{{cmovies}}</p> //自己定义的 <h2>{{cmessage}}</h2> </div> </template> </body> <script src="../js/vue.js"></script> <script> const cpn={ template:'#cpn', //1. 数组写法 props(共三种写法 三选一) props:['cmovies','cmessage'], props:{ //2.类型限制 （三选一） cmovies:Array, cmessage:String, // 3.提供一些默认值 （三选一） cmessage:{ type:String, default:'2345678',//当父组件没传这个值 就是默认值 required:true //加上这个required 则父组件必须传这个不然报错 }， cmovies:{ //如果类型是对象或者数组的时候，默认值必须是一个函数 type:Array, default(){ return [] } } }, data(){ return } } const app = new Vue({ el:'#app', data:{ messgae:'你好呀', movies:['电影','电影2','电影3'] }, components:{ cpn } }) </script>

prop驼峰

<div id="app"> <cpn :c-movies="movies" :c-message="message"></cpn> //含有驼峰需要以-连接形式传值 </div> //模板 不会显示 <template id="cpn"> <div> <p>{{cMovies}}</p> <h2>{{cMessage}}</h2> </div> </template> </body> <script src="../js/vue.js"></script> <script> const cpn={ template:'#cpn', props:{ cMessage:{ type:String, default:'2345678', required:true }， cMovies:{ type:Array, default(){ return [] } } }, data(){ return } } const app = new Vue({ el:'#app', data:{ messgae:'你好呀', movies:['电影','电影2','电影3'] }, components:{ cpn } }) </script>

2）子组件向父组件传值（自定义事件）

//父组件模板 <div id="app"> //3.父组件绑定子组件的方法 v-on:item-click 监听到了以后触发cpnClick方法 <cpn @item-click="cpnClick"></cpn> </div> //模板 不会显示 <template id="cpn"> <div> <button v-for="item in aArray" @click="btnClick(item)">{{item.name}}</button> //1.首先 监听子组件事件，并传参 </div> </template> </body> <script src="../js/vue.js"></script> <script> const cpn={ template:'#cpn', data(){ return{ aArray:[ {id:'12345', name:'wertyu'}, {id:'2457', name:'sffgt'}, {id:'84543', name:'etyr'}] } },methods:{ //2.监听子组件方法 发射事件 item-click 传参item btnClick(item){ this.$emit('item-click',item) } } } //父组件 const app = new Vue({ el:'#app', data:{ }, components:{ cpn }, methods:{ //4.操作 这里能拿到传进来的value cpnClick(value) { console.log(value); } } }) </script>

3)父子组件通信 子组件通过子组件修改自己的值和父组件的值 结合双向绑定案例 (这是基础 实际不用这个 用vuex）

<div id="app"> <cpn :number1="num1" :number2="num2" @number1change="number1change" @number2change="number2change"></cpn> //4.父组件绑定子组件发送过来的函数并触发方法 </div> <template id="cpn"> <div> <h2>{{number1}}</h2> //1.首先 找到要显示和修改的值 //<input type="text" v-model="dnumber1"> <input type="text" :value="dnumber1" @input="num1Input" > //2. 把v-model 拆成 :value="dnumber1" @input="num1Input"形式 由于prop不能直接修改要通过修改父组件的值修改props 所以{{}}里的参数和这里：value的参数不一样 这里是data()返回的参数 data()只是拿了props里的值 修改data()的值不会修改props里的值 //为啥要拆成@input 因为我要监听input的改变 根据改变的值给父组件发射$emit函数 v-model不能发射$emit函数 <h2>{{number2}}</h2> //<input type="text" v-model="dnumber2"> <input type="text" :value="dnumber2" @input="num2Input" > </div> </template> </body> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ num1:1, num2:0 }, methods:{ //5.在方法中修改自己的值 注意数据类型 number1change(value){ //this.num1 = value 报错 数据类型不对 this.num1 = paresInt(value) //解析字符串 返回一个整数 }, number2change(value){ this.num2 = value } } components:{ cpn:{ template:'#cpn', props:{ number1:Number, number2:Number, //props不支持 值的修改 v-model直接绑定是可以修改的 但是会报错 报错推荐用data()修改 }, data(){ // 组件中的data是个函数 若不需要改父组件的值直接 v-model那条 写到这就可以 return{ dnumber1:this.number1, dnumber2:this.number2 } }, methods:{ num1Input(event){ //3.触发子组件绑定的方法 给父组件发射一个$emit函数 把最终的值传过去 this.dnumber1 = event.target.value; //将input中的value赋值给dnumber1 this.$emit('number1change',this.dnumber1 ) //发射函数 this.number2= this.dnumber1 *100 //把data（）里的值改了 this.$emit('number2change',this.dnumber2 ) //再通过父组件把 props里的值改了 }, num2Input(event){ this.dnumber1 = event.target.value; this.$emit('number2change',this.dnumber2 ) this.dnumber2= this.dnumber1/100 this.$emit('number1change',this.dnumber1 ) } } } } }) </script>