组件最常用的还是用.vue文件的方式编写
文章目录
父子组件
1. 父组件引用子组件
父组件 (parent.vue)
<template>
<div class="parent">
<h1>我是父组件</h1>
<child></child>
</div>
</template>
<script>
import Child from "./child";
export default {
components:{
Child
},
}
</script>
子组件(child.vue)
<template>
<div class="child">
<p>我是子组件</p>
</div>
</template>
<script>
export default {
name: 'child',
}
</script>
2. 父组件给子组件传值(props)
父组件(parent.vue)
<template>
<div class="parent">
<h1>我是父组件,我的数据msg是{{msg}}</h1>
<child :child-msg="msg"></child>
</div>
</template>
<script>
import Child from "./child";
export default {
data(){
return{
msg:"hello"
}
},
components:{
Child
},
}
</script>
子组件(child.vue)
<template>
<div class="child">
<p>我是子组件,父组件传递给我的值是:{{childMsg}}</p>
</div>
</template>
<script>
export default {
name: 'child',
props: ['childMsg']
}
</script>
这里是将msg的值传给子组件中childMsg,驼峰式要转换 -
子组件通过props来接收数据:
有三种方式,这里用到了第一种
方式1:
props: ['childMsg']
方式2 :
props: {
childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}
方式3:
props: {
childMsg: {
type: Array,
default: [0,0,0] //这样可以指定默认的值
}
}
type:
String
Number
Boolean
Function
Object
Array
Symbol
default:默认值
3. 子组件触发父组件方法($emit)
在父组件中 子组件上绑定事件
@change='parchange'
子组件通过$emit('change')
触发@change方法
子组件通过$emit('change',val)
触发@change方法,并将val 传给父组件.(可用于修改父组件的值)
父组件(parent.vue)
<template>
<div class="parent">
<h1>我是父组件,我的数据msg是{{msg}}</h1>
<child :child-msg="msg" @update:childMsg="msg = $event"></child>
</div>
</template>
<script>
import Child from "./child";
export default {
data(){
return{
msg:"hello"
}
},
components:{
Child
},
}
</script>
子组件(child.vue)
<template>
<div class="child">
<p>我是子组件,父组件传递给我的值是:{{childMsg}}</p>
<button @click="changeMsg">改变childMsg的值</button>
</div>
</template>
<script>
export default {
name: 'child',
props: {
childMsg: {
type: String,
default: ''
}
},
methods:{
changeMsg(){
this.$emit('update:childMsg', '你好')
}
}
}
</script>
如果还有其他操作,可以将
update:childMsg
变成具体的方法
子组件this.$emit('updatechildMsg', '你好')
父组件<child :child-msg="msg" @updatechildMsg="updatechildMsg"></child>
methods:{ updatechildMsg(val){ this.msg = valel; //其他操作 } }
4.props双向数据绑定(.sync)
父组件中
<child :child-msg.sync="msg"></child>
子组件不变,同上一步update:childMsg
vue2 父子组件间的双向数据绑定 (el-dialog问题)
5. 父组件调用子组件方法和值(ref)
父组件
<child ref='child' ></child>
//调用子组件中的方法
this.$refs.child.say()
子组件
methods:{
say(){
console.log('hello,我是子组件中的方法')
}
}
6. 子组件使用父组件的值和方法($parent)
父组件中的值(name),方法(test)
子组件通过this.$parent.name
,this.$parent.test()
使用
兄弟组件
子——>父——>子(通过父子两次传递)
vuex(值)
event-bus(方法,值)
新建bus.js,A,B组件引入bus.js。
A向B传值,A使用$emit(event,val)
触发事件,B通关$on
监听event
bus.js
import Vue from 'vue'
export default new Vue()
父组件
<template>
<div class="parent">
<h1>我是父组件</h1>
<child-a ></child-a>
<child-b ></child-b>
</div>
</template>
<script>
import childA from "./childA";
import childB from "./childB";
export default {
components: {
childA,
childB
},
};
</script>
A
<template>
<div class="child">
<p>我是子组件A ,<button @click="sendMsg">问候组件b</button></p>
</div>
</template>
<script>
import bus from './bus'
export default {
methods:{
sendMsg(){
bus.$emit('send', Math.random())
}
},
}
</script>
B
<template>
<div class="child">
<p>我是子组件B,msg:{{msg}}</p>
</div>
</template>
<script>
import bus from './bus'
export default {
data () {
return {
msg: '--',
}
},
created () {
bus.$on('send', data => {
this.msg = data
})
}
}
</script>