Vue父子组件之间传递数据
父向子: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>
还没有评论,来说两句吧...