父组件和子组件相互传值

父组件向子组件传值 props

父组件:

标签

<child type="note" :defaultValue="mdl.title"></child>

  

子组件:

标签

<p>{{type}}</p>

脚本

props: {
    type: null,
    defaultValue : null
},

  或者

props: [‘type‘, ‘defaultValue‘],

我一般默认设null(不初始值会报错),然后在beforeMount()方法做判断和赋值

beforeMount () {
    if (this.defaultValue) {
      this.setData(this.defaultValue)
    }
},
methods: {
    setData (data) {
      this.fileList = data
    },
}

注:如果父组件传进来的带下划线,传进来的数据是a-bc, vue转化成aBc, 在js 里面写aBc

子组件更新值给父组件 this.$emit

父组件:

标签

<child v-on:change="showChildChange"></child>

  或者

<child @change="showChildChange"></child>

脚本  

methods: {
    showChildChange (value) {
        console.log(‘value‘, value)
    }
}

  

子组件:

this.$emit 子组件发射自定义事件sendiptVal 并携带要传递给父组件的值

脚本

methods: {
    handleChange ({ data }) {
      this.$emit(‘change‘, data)
    },
},

如果要传递给父组件很多值,这些值要作为参数依次列出 如 this.$emit(‘change‘, 1, 2);

还有一种watch(监听)父组件数据的方法,可参考:https://www.jianshu.com/p/1b7e8a28d836

参考:

vue 中父子组件传值:props和$emit:https://www.cnblogs.com/rlann/p/7163045.html

vue—子组件修改父组件的值:https://blog.csdn.net/sinat_36422236/article/details/79403718

原文地址:https://www.cnblogs.com/cxscode/p/11187989.html

时间: 2024-11-09 19:31:21

父组件和子组件相互传值的相关文章

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

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

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

18.父组件给子组件传值

1.父组件给子组件传值 2.父组件把方法传递给子组件 原文地址:https://www.cnblogs.com/yaboya/p/10273805.html

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’],将上边红色的属性名称写在这里

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

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

11.父组件向子组件传值

父组件向子组件传值 父组件Home.vue <template> <div> <h2>{{msg}}</h2> <v-header :title="title" :run="run"></v-header> </div> </template> <script> import Header from "./Header.vue"; expo

vue父组件向子组件传值

上节讲了子组件向父组件传值(传送门),本节记录父组件向子组件传值 一:父组件通过向子组件绑定自定义属性的形式向子组件传递数据 <!-- 父组件 --> <div id="app"> <cpn :cmovies='movies'></cpn> </div> 使用v-bind规定子组件要接收的属性为cmovies,要接收的数据是父元素的movies,此时cmovies作为子组件的数据对象 说明: 1.在父组件上通过v-bind绑定

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

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

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

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