vue父组件向子组件传值

上节讲了子组件向父组件传值(传送门),本节记录父组件向子组件传值

  一:父组件通过向子组件绑定自定义属性的形式向子组件传递数据

 

 <!-- 父组件 -->
    <div id="app">
        <cpn :cmovies=‘movies‘></cpn>
    </div>

    使用v-bind规定子组件要接收的属性为cmovies,要接收的数据是父元素的movies,此时cmovies作为子组件的数据对象

    说明:

      1.在父组件上通过v-bind绑定自定义属性,子组件通过props项接收这个属性,并将其作为数据变量进行操作

      2.语法: <cpn  :定义子组件接收时使用的属性名  = ‘父组件的数据变量’></cpn>

  二:子组件通过props接收父组件传递来的数据并对其操作

    

 // 子组件
        const cpn = {
            template: ‘#ccp‘ ,
            props: [‘cmovies‘],
        }

    子组件下的 template模板

   <template id="ccp">
        <div>
             <!-- 子组件根据父组件定义的属性名对接收到的父组件数据进行操作 -->
            <h1 v-for=‘item of cmovies‘>{{item}}</h1>
        </div>
    </template>

    说明:

      1. 子组件使用props项接收父组件规定的属性名,可以在子组件内部将这个属性名作为子组件的数据对象操作

      2. 在使用props接收到父组件传递到的数据时,就可以将父组件规定的属性名进行操作了

  

  一点笔记:

    可以将子组件接收到的数据作为一个obj格式来个性化定制数据。

  // 子组件
        const cpn = {
            template: ‘#ccp‘ ,
            props: {
              cmovies:{
                  type: Array, // 定义接收到的数据的类型
                  default:‘这个数据变量的默认值‘,
                  required:false //规定这个数据是否必传,默认false
              }
            },
        }

这样 ,便完成了父向子 传值的内容。

以上。

      

  

  

原文地址:https://www.cnblogs.com/hjk1124/p/12344897.html

时间: 2024-10-09 08:30:01

vue父组件向子组件传值的相关文章

Vue 父组件向子组件传值,传方法,传父组件整体

父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3.就可以在子组件中引用title Tips:避免父子组件传值时命名冲突 父子组件传方法方式一样 1.父组件调用子组件时绑定属性,例如-> :run="run" 2.子组件中props中声明run:props:['title','msg','run'] 3.子组件中的button引用r

VUe.js 父组件向子组件中传值及方法

父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以要想在子组件中使用父组件的数据的时候,就需要以属性绑定的形式,将父组件的数据传递到子组件中.     3. 通过属性绑定传递来的数据无法再子组件中直接使用,需要在props中重新定义以后才可以使用.例:props:['变量名'].props是一个数组.    4. 子组件中的data数据都是私有,子

vue组件之间传值、父组件获取子组件的方法

1.子组件向父组件传值 子组件 <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {    

vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

Vue中,父组件向子组件传值

1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 原文地址:https://www.cnblo

Vue 父组件与子组件之间传值

一.父组件与子组件之间值传递步骤如下: 例如:我有一个父组件Myhome.vue 和一个子组件Header.vue 1.父组件调用子组件的时候,动态绑定属性值 <v-myheader :title="title"></v-myheader> 2.在子组件使用 props 来接受父组件传过来数据(props:['title']),如果是多个就定义多个属性就可以 完整代码如下: 1.Myhome.vue(父组件)代码如下: <template> <

vue中父组件向子组件传值(方法)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父组件把方法传递给子组件</title> <script src="./vue2.6.9.js"></script> </head> <body> <div id="app&

Vue_(组件通讯)父组件向子组件传值

Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:com-b要获取父组件data中的name属性 3.在<com-b :name=“name”></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写 4.在子组件定义部分里添加选项,值是个字符串数组 props:[‘name’],将上边红色的属性名称写在这里

父组件和子组件相互传值

父组件向子组件传值 props 父组件: 标签 <child type="note" :defaultValue="mdl.title"></child> 子组件: 标签 <p>{{type}}</p> 脚本 props: { type: null, defaultValue : null }, 或者 props: ['type', 'defaultValue'], 我一般默认设null(不初始值会报错),然后在bef