您的位置：首页 > Web前端 > Vue.js

5. Vue 父子件数据传递

2020-07-13 05:55 39 查看

Vue 父子件数据传递

  • 概述

    假设需要父组件传递数据至子组件，且子组件数据修改时需将父组件的数据同步修改，有如下两种修改方式。

    通过自定义v-model方式实现
  1. 将父组件数据通过props传入至子组件；
  2. 子组件内创建变量复制props数据；
  3. 通过v-bind将子组件的变量绑定至子组件的value上；
  4. 绑定@input时间函数
    a. 将输入框的数据幅值至子组件数据上；
    b. 通过$emit()函数给父组件发送事件；
  5. 父组件监听子组件触发的事件，并获取数据幅值至父组件数据。
  • 通过v-model方法配合watch方式实现
  1. 将父组件数据通过props传入至子组件；
  2. 子组件内创建变量复制props数据；
  3. 通过v-model将子组件的变量双向绑定至输入框；
  4. 通过watch方法监听子组件数据
    a. 通过$emit()函数给父组件发送事件；
  5. 父组件监听子组件触发的事件，并获取数据幅值至父组件数据。

  • 自定义v-model方法

    <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue父子件数据传递(自定义v-model方式)</title>
</head>
<body>
<div id="app">
<cmp1
:father_val1="val1"
:father_val2="val2"
@change_val1="change_val1"
@change_val2="change_val2"
></cmp1>
<h2>father_val1: {{ val1 }}</h2>
<h2>father_val2: {{ val2 }}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('cmp1',{
template:`
<div>
<input type="text" :value="child_val1" @input="change_val1">
<input type="text" :value="child_val2" @input="change_val2">
<h2>child_val1: {{child_val1}}</h2>
<h2>child_val2: {{child_val2}}</h2>
</div>
`,
data(){
return {
child_val1: this.father_val1,
child_val2: this.father_val2
}
},
props:{
father_val1: '',
father_val2: ''
},
methods:{
change_val1(event){
this.child_val1 = event.target.value
this.$emit('change_val1', this.child_val1)
},
change_val2(event){
this.child_val2 = event.target.value
this.$emit('change_val2', this.child_val2)
}
}
})
let app = new Vue({
data:{
val1: 'val1',
val2: 'val2',
},
methods: {
change_val1(val){
this.val1 = val
},
change_val2(val){
this.val2 = val
}
}
}).$mount('#app')
</script>
</body>
</html>

  • v-model配合watch方法

    <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue父子件数据传递(v-model配合watch方式)</title>
</head>
<body>
<div id="app">
<cmp1
:father_val1="val1"
:father_val2="val2"
@change_val1="change_val1"
@change_val2="change_val2"
></cmp1>
<h2>father_val1: {{ val1 }}</h2>
<h2>father_val2: {{ val2 }}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('cmp1',{
template:`
<div>
<input type="text" value="child_val1" v-model="child_val1">
<input type="text" value="child_val2" v-model="child_val2">
<h2>child_val1: {{child_val1}}</h2>
<h2>child_val2: {{child_val2}}</h2>
</div>
`,
data(){
return {
child_val1: this.father_val1,
child_val2: this.father_val2
}
},
props:{
father_val1: '',
father_val2: ''
},
watch:{
child_val1(newVal){
this.$emit('change_val1', this.child_val1)
},
child_val2(newVal){
this.$emit('change_val2', this.child_val2)
}
}
})
let app = new Vue({
data:{
val1: 'val1',
val2: 'val2',
},
methods: {
change_val1(val){
this.val1 = val
},
change_val2(val){
this.val2 = val
}
}
}).$mount('#app')
</script>
</body>
</html>
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航