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:`
我是标题
`
)}
//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:`
我是标题
`
)}
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:`
我是标题
`
)}
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:`
我是标题1
`
)}
//cpnC2是父组件
const cpnC2=Vue.extend({
template:`
我是标题2
4.注册组件的语法糖
- 全局组件
<div id=“app”>
<a-cpn></a-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('a-cpn',{
template:`
我是标题
`
})
let app=new Vue({
el:'app',
data:{
}
)}
</script>
- 局部组件
let app=new Vue({
el:'app',
data:{
},
components:{
cpn2:{
template:`
我是标题
`
}
}
)}
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" :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" :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>