我在上一篇说了一下父子组件之间是如何传值的,今天说一下子组件如果需要改变传过来的数据供自己使用。
一、 子组件需要改变传来的值然后使用
1. 定义一个局部变量,并用 props 的值来初始化它
在 App.vue 中
<template>
<div class="hello">
<h3>我是 App 父组件</h3>
<h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>
<hr>
<!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
<Hello :message="msg"></Hello>
</div>
</template>
<script>
// 引入 Hello 组件
import Hello from ‘./assets/components/Hello.vue‘
export default {
data(){
return {
msg:‘父组件‘,
name:‘tom‘,
age:‘22‘,
user:{
id:1234,
userName:‘Jack‘
}
}
},
// 注册 Hello 组件
components:{
Hello
}
}
</script>
在 Hello.vue 中
<template>
<div class="hello">
<h3>我是 hello 子组件</h3>
<!-- 在页面中直接渲染即可 -->
<h4>访问父组件中的数据: {{msg}}</h4>
<button @click="change">改变父组件的数据</button>
</div>
</template>
<script>
export default {
// 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
props:[‘message‘],
data(){
return {
// 定义一个局部变量,并用 props 的值来初始化它
msg:this.message
}
},
methods:{
// 定义一个方法,来触发改变父组件的数据
change(){
this.msg = ‘我改变了父组件的数据‘
}
}
}
</script>
效果图:
子组件改变父组件的数据
2. 定义一个计算属性,处理 prop 的值并返回:
在 Hello.vue 中改动
<script>
export default {
// 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
props:[‘message‘],
data(){
return {
// 定义一个局部变量,并用 props 的值来初始化它
msg:this.message
}
},
computed:{
// 定义一个方法,来触发改变父组件的数据
change(){
return this.msg = ‘我改变了父组件的数据‘
}
}
}
</script>
当页面渲染成功自动完成计算
二、子组件中改变传过来的数据并同步到父组件
1. 使用 sync 修饰符,它会被扩展为一个自动更新父组件属性的 v-on 监听器
在 App.vue 中把 template 的内容更改为
<template>
<div class="hello">
<h3>我是 App 父组件</h3>
<h4>访问自己的数据:{{msg}}</h4>
<hr>
<!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
<!-- .sync 会被扩展为一个自动更新父组件属性的 v-on 监听器 -->
<Hello :message.sync="msg"></Hello>
</div>
</template>
在 Hello.vue 中更改为
<template>
<div class="hello">
<h3>我是 hello 子组件</h3>
<!-- 在页面中直接渲染即可 -->
<h4>访问父组件中的数据: {{message}}</h4>
<button @click="change">改变父组件的数据</button>
</div>
</template>
<script>
export default {
// 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
props:[‘message‘],
methods:{
change(){
// 使用 .sync 时,需要显式的触发一个更新事件
// update 为固定写法,后面跟将要被改变的数据对象,接着写替换的数据
this.$emit(‘update:message‘,‘我改变了父组件的数据‘)
}
}
}
</script>
效果为:
2. 可以将父组件中的数据包装成对象或数组,然后在子组件中修改对象的属性
在 App.vue 中
<template>
<div class="hello">
<h3>我是 App 父组件</h3>
<h4>访问自己的数据:{{user.userName}}</h4>
<hr>
<!-- 2. 在调用子组件时,绑定想要获取的父组件中的数据 -->
<Hello :user="user"></Hello>
</div>
</template>
<script>
// 引入 Hello 组件
import Hello from ‘./assets/components/Hello.vue‘
export default {
data(){
return {
// 1. 在父组件中把数据写成对象的形式
user:{
id:1234,
userName:‘Jack‘
}
}
},
// 注册 Hello 组件
components:{
Hello
}
}
</script>
在 Hello.vue 中
<template>
<div class="hello">
<h3>我是 hello 子组件</h3>
<!-- 5. 在页面中直接渲染即可 -->
<h4>访问父组件中的数据: {{user.userName}}</h4>
<button @click="change">改变父组件的数据</button>
</div>
</template>
<script>
export default {
// 3. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
props:[‘message‘,‘user‘],
methods:{
// 4.直接修改 user 对象中的数据
change(){
this.user.userName = ‘Tom‘
}
}
}
</script>
效果如下:
今天的分享就到这里,如有不足,欢迎留言讨论
原文地址:https://www.cnblogs.com/changk/p/8728922.html
时间: 2024-10-09 20:51:16