父向子：v-bind()+props
父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。
父组件代码如下：
<template>
<div id="app">
<child :num="size"></child>
</div>
</template>
<script>
//引入组件
import child from '@/zhao/data'
export default{
name:'app',
data(){
return{
size:22,
}
},
//注册组件
components:{
child,
}
}
</script>
子组件接收和使用数据：
<template>
<div id="father">
<!-- 使用数据 -->
{
{ num }}
</div>
</template>
<script>
export default {
name:'father',
data(){
return{
}
},
// 接收数据
props: ['num'],
}
</script>
子向父：自定义事件 $emit
子组件部分代码：
<template>
<div id = "login">
<label>
<p用户名：{
{user}}</p>
<input v-model="username" @change="setUser"/>
</label>
</div>
</template>
<script>
export default {
name:'login',
data(){
return{
username:'',
}
},
methods:{
setUser:function(){
this.$emit('transferUser',this.username)
}
},
components:{
LoginDiv,
},
}
</script>
父组件部分代码：
<template>
<div id = "app">
<LoginDiv @transferUser="getUser"></LoginDiv>
<p用户名：{
{user}}</p>
</div>
</template>
<script>
//引入组件
import LoginDiv from '@/zhao/login'
export default {
name:'app',
data(){
return{
user:'',
}
},
methods:{
getUser(msg){
this.user = msg
}
},
components:{
LoginDiv,
},
}
</script>
总结：
（1）子组件传递数据：
this.$emit('自定义事件名', '要传递的数据')
（2）父组件接收数据：
<子组件名 @自定义事件名="方法名"/>
//.....
methods: {
方法名(val) {
// val 是子组件传递过来的数据
// 、、、
}
}
父子双向：v-model + this.$emit()
父组件部分代码：
<template>
<div class="home">
<h1>Home 组件- - -{
{ count }}</h1>
<button @click="count+=1">点击按钮， 数量 +1（父组件）</button>
<Test v-model:num="count"/>
</div>
</template>
<script>
import Test from './components/Test'
export default {
name: 'Home',
components: {
Test,
},
data() {
return {
count: 1
}
},
}
</script>
子组件部分代码：
<template>
<div>
<h1>Test 组件- - -{
{ num }}</h1>
<button @click="add">点击按钮 数量 +1（子组件）</button>
</div>
</template>
<script>
export default {
name: 'Test',
props: ['num'],
emits: ['update:num'], // 这行可写可不写，写了是方便统计emit方法，这里定义了的方法，后面this.$emit才能触发
methods: {
add() {
this.$emit('update:num', this.num + 1)
}
}
}
</script>
<style>
</style>
总结：
（1）父组件核心代码
<子组件名 v-model:属性名="属性值"/>
（2）子组件核心代码
<template>
<div>
<!-- 使用数据 -->
{
{ 属性名 }}
<button @click="方法名">点击进行操作</button>
</div>
</template>
<script>
export default {
// 接收数据
props: ['属性名'],
emits: ['update:属性名'], // 这行可写可不写，写了是方便统计emit方法，写了的话，这里定义了的方法，后面this.$emit才能触发
methods: {
方法名() {
this.$emit('update:属性名', 属性值操作)
}
}
}
</script>
原文链接: https://blog.csdn.net/friggly/article/details/125439482