vue基础：父子组件传值

た入场券 2022-03-25 19:18 316阅读 0赞

### vue基础：父子组件传值 ###

#### 一.父–>子 ####

1.父组件调用子组件的时候，在父组件中绑定动态属性。

<v-header :title="title"/>

2.子组件中通过props接受父组件传来的数据

props:['title']//接受父组件传来的title

Header.vue

<template>
        <div>
            <h2>我是一个头部组件--{
       {title}}</h2>
            <br>
            <button @click="run(123)">click</button>
            <br>
            <button @click="getparent()">获取父组件的属性和方法</button>
        </div>
    </template>
    <script> export default { data(){ return{ msg:'msg' } }, methods:{ getparent(){ // alert(this.title) // alert(this.home.title) this.home.run(12); } }, props:['title','run','home']//接受父组件传来的title } </script>

Home.vue

<template>
        <div>
            首页组件
            <br>
            <v-header :title="title" :run="run" :home="this"/>
        </div>
        
    </template>
    <script> import Header from './Header.vue'; export default { data(){ return{ msg:'我是一个home组件', title:'首页111' } }, components:{ 'v-header':Header },methods:{ run(data){ alert("我是home组件的run方法"+data); } } } </script>
    
    
    ```html
    App.vue

发表评论取消回复

表情：

评论列表（有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 父子组件传值

新建子组件新建一个模板对象com1，然后在vm中的components里注册一下，就可以使用com1标签了，标签内容就是子元素的内容。 //子组件 v

淡淡的烟草味﹌/ 2023年07月21日 08:40/ 0 赞/ 20 阅读

相关 vue 父子组件传值

父组件通过属性传值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

蔚落/ 2023年07月10日 15:58/ 0 赞/ 23 阅读

相关 Vue父子组件传值

首先创建基础项目 https://blog.csdn.net/sunt2018/article/details/102697487 然后写一个父子组件 `App.vue`

Love The Way You Lie/ 2023年05月31日 06:46/ 0 赞/ 4 阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 319 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 313 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 310 阅读

相关 vue基础：父子组件传值

vue基础：父子组件传值一.父–>子 1.父组件调用子组件的时候，在父组件中绑定动态属性。 <v-header :title="title"/> 2.

た入场券/ 2022年03月25日 19:18/ 0 赞/ 317 阅读

相关 vue基础：非父子组件传值

vue基础：非父子组件传值本文共用到四个文件：根组件：App.vue 两个子组件：Home.vue,News.vue js文件：eveemit.js

ゝ一纸荒年。/ 2022年03月24日 14:46/ 0 赞/ 300 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 383 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 535 阅读