01.vue组件-父组件向子组件传值

最新推荐文章于 2024-08-30 10:14:48 发布
最新推荐文章于 2024-08-30 10:14:48 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/luruihua/p/11323066.html
版权

父组件向子组件传值

1. 效果

 

2. 代码

<!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" content="ie=edge">
    <title>Document</title>
    <script src="../table/js/vue.js"></script>
</head>

<body>
    <div id="app">
        <a href="#" @click.prevent="msg='登陸'">登陆</a>
        <a href="#" @click.prevent="msg='注冊'">注册</a>
        <login v-bind:parentmsg="msg"></login>

    </div>
    <template id="log">
        <div>
            {{parentmsg}}組建
        </div>
    </template>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '登陸'
            }
        },
        components: {
            'login': {
                template: '#log',
                props: ['parentmsg']
            }
        }
    })
</script>

</html>

3. 知识点：

3.1. 如何声明一个组件？

答：首先在<div id='#app'>外面写入一个<template>标签，里面只允许有一个根元素。这个<template>标签的id，为vue对象的components属性中login对象（login对象是一个这个标签的名称）的template属性的值。说了这么绕来一个图说明他们的对应关系。

3.2 如何父组件向子组件传递值？？

答：首先需要在<login>标签上绑定一个属性，属性名随便，这里为parentmsg(不可以为大写)，值就为父组件的data中的值(msg)，这时还不能直接使用，需要在子组件里面声明props属性（为一个数组），里面写绑定的属性名称，这时就可以用{{属性名}}，来拿到父组件msg的值了。

--------------------------------------------------------------------------------------------------------------分割线-------------------------------------------------------------------------------------------------

我主要是记录语法规则，如果有错，望及时通知纠正，谢谢。

转载于:https://www.cnblogs.com/luruihua/p/11323066.html

ai27275
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3-20-组件-父组件给子组件传值
northcastle的博客
12-15 1979
vue3 中 的父组件 传值 给 子组件 的方式
vue-prop父组件向子组件进行传值的方法
08-27
组件间的数据通信是实现组件协作的关键，其中一种常见的方式是通过`props`从父组件向子组件传递数据。 Vue的`props`机制允许父组件定义一些属性，然后在子组件的模板中使用这些属性。这使得父组件的状态可以影响到...
Vue3-实现父组件向子组件传值
LCKNOW的博客
03-06 911
如何把父组件中的东西传到子组件中去 传一个字符串常量 传一个变量、方法、方法名 定义一个ref()式儿的变量 let x = ref() x装的是Person.vue组件的实例 但只能看到iPerson.vue中写在 defineExpose({})里的数据
41. Vue组件传值-父组件向子组件传值
DevOps海洋的渔夫@专栏
07-08 5983
前言 前面写了组件的创建、切换等等篇章，主要讲述了组件自身如何在父组件app中如何渲染使用。这里存在一个问题，就是父组件的数据如何传递到子组件中。 这是一个很常见的情况，如果是jQuery那么都是直接传参数就是了，而在Vue框架中，这里就要使用子组件中props属性来处理了。 官网介绍props地址：https://cn.vuejs.org/v2/guide/components-props.ht...
Vue--组件通信--子组件向父组件传值--使用/教程/实例
IT利刃出鞘的博客
11-07 3080
原文网址： 简介 说明 本文用示例介绍Vue中子组件给父组件传递数据的方法。 概述 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。 众所周知，vue组件间的传值都是单向数据流。按官网的单向数据流解释：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过...
Vue.js 中子组件向父组件传值的方法
Yeats_Liao的博客
01-31 1532
Vue.js 中子组件向父组件传值的方法
Vue.js组件-组件通信-子组件向父组件传值
qq_41049094的博客
03-14 1419
子组件向父组件传值 子向父传值需要通过自定义事件实现 子组件数据变化时，通过$emit()触发自定义事件 自定义事件名称建议使用kebab-case 父组件监听子组件的自定义事件，并设置处理程序 自定义事件传值 子组件触发事件时可以向父组件传值 父组件在监听事件时需要接收子组件传递的数据，示例如图： 组件与v-model v-model用于组件时，需要通过props与自定义事件实现，示例如图： 今日份推荐歌曲：薛之谦-绅士 ...
Vue 子组件向父组件传值
u010373106的博客
05-23 600
emit。
Vue组件-父组件向子组件传值
好记性不如烂键盘
10-06 1122
父组件向子组件传值 组件中可以用props来声明需要从父级接收的数据。 props和data、method平级,有两种方式： 1. 字符串数组方式,数组中的字符串就是传递时的名称 <div id="app"> <!-- 第一步 使用bind绑定的方式 将父类的组件中的数据传给子组件 --> <parent :msg="msg"></parent> </div> <template id="temp"> <h2&
vue3--父传子，父子组件传值
imkaifan的博客
12-13 1606
vue3--父传子，父子组件传值
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue 子组件向父组件传值方法
08-27
虽然Vue推荐单向数据流，即从父组件向子组件传递数据，但有时也可能需要从子组件反向修改父组件的数据。这可以通过创建一个临时中间变量并结合`props`来实现。首先，父组件通过`props`向子组件传递一个值，然后子...
vue 组件间的通信之子组件向父组件传值的方式
11-20
本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。 首先，我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue ref和reactive区别
灰海
08-25 6691
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
m0_54066656的博客
08-27 2174
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
最新发布
妍思码匠的博客
08-30 1156
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
layui栅格布局设置列间距不起作用
gc_2299的博客
08-26 946
记录layui栅格布局设置列间距不起作用的解决办法
vue父组件向子组件传值 子组件在哪接收
04-23
在Vue中，父组件向子组件传值可以通过props属性来实现。组件可以在props中声明接收父组件传递的值，并在子组件中使用这些值。 以下是两种父组件向子组件传值的方法： 方法一：使用props传值[^1] 在父组件中，通过props属性将数据传递给子组件。子组件可以在props中声明接收的属性，并在子组件中使用这些属性。 父组件： ```vue <template> <div> <child-component :imageUrls="imageUrls"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { imageUrls: [] // 父组件中的图片url数组 }; } }; </script> ``` 子组件： ```vue <template> <div> <div v-for="imageUrl in imageUrls" :key="imageUrl"> <img :src="imageUrl" alt="image"> </div> </div> </template> <script> export default { props: { imageUrls: { type: Array, required: true } } }; </script> ``` 方法二：使用$emit触发自定义事件[^2] 在父组件中，可以通过$emit方法触发自定义事件，并将数据作为参数传递给父组件。 父组件： ```vue <template> <div> <child-component @image-uploaded="handleImageUploaded"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleImageUploaded(imageUrls) { // 处理子组件传递的图片url数组 } } }; </script> ``` 子组件： ```vue <template> <div> <!-- 子组件中触发自定义事件，并将图片url数组作为参数传递给父组件 --> <button @click="$emit('image-uploaded', imageUrls)">上传图片</button> </div> </template> <script> export default { data() { return { imageUrls: [] // 子组件中的图片url数组 }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值