父子间组件的传值,子组件自我使用的解决办法

我在上一篇说了一下父子组件之间是如何传值的,今天说一下子组件如果需要改变传过来的数据供自己使用。

一、 子组件需要改变传来的值然后使用
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

父子间组件的传值,子组件自我使用的解决办法的相关文章

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值

1.父组件如何主动获取子组件的数据 方案1:$children $children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组 定义Header.HelloWorld两个组件 <template> <div class="index"> <Header></Header> <HelloWorld :message="message"></HelloWorld>

vue.js组件之j间的通讯一 子组件接受父祖件数据

Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有:

vue 父到子动态传值 子组件实时渲染

近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件  数据在子组件中展示. 根据不同的团队 动态渲染数据总览. 父组件: <Cards ref="getCardId"></Cards> data() { return { params:{ enterprises:'', }, }; }, 引入子组件 import {Cards} from "./components" export default {

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja

vue2.x 父组件监听子组件事件并传回信息

利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组件中使用$emit发送事件 this.$emit('from-child-msg', '这是子组件传递的消息');

react 实现组件嵌套以及子组件与父组件之间的通信

当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件:GenderSelect 渲染:

父组件中调用子组件的方法和属性

方案:利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el) 1.当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom,对dom进行原生的操作 <div class="foods-wrapper" ref="foods-wrapper"> 通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也不能用) let menuList

Vue父组件如何调用子组件(弹出框)中的方法的问题

如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的实例,可以理解为绑在了DOM结构上那如果我偏偏想调用的是这个子组件(弹出框)中的方法,但又不想要弹出框显示,怎么办呢?解决方法:把v-if换成v-show,这样DOM元素会一直存在于父组件中,子组件的方法也就能调用了 原文地址:https://www.cnblogs.com/zsg88/p/1099

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con