vue中父传子和子传父，传值方法

本文主要是介绍vue中父传子和子传父，传值方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.关于传值的规则

props值是对象的时候，传递的属性以对象的形式保存在props里面，对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则。

    <div id="app">
        <com1 :m="msg" :t="txt" :ind="90"></com1>
    </div>
<script>
    Vue.component("com1",{
        template:`<div>
            <p>{{m}}</p>
            <p>{{t}}</p>
            <p>{{ind}}</p>
            </div>`,
            props:{
  // props值是对象的时候，传递的属性以对象的形式保存在props里面
  // 对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则
         m:{
            required:true,//要求该属性必须传，不传就报错
                },
         t:{
            type:Number,//类型是数字
            default:200 //不传属性时默认为200，等同于函数的默认参数
                },
         ind:{
             // validator自定义匹配规则
              validator:function(v){
              return v > 20
                    }
                }
            }
    })
    var app = new Vue({
        el:"#app"
        ,data:{
            msg:"你好",
            txt:10
        }
    })
</script>

2.父传子

父传子:通过自定义属性进行传值

1.在父组件使用子组件的时候，给子组件添加自定义属性，属性值为传递的数据

2.在子组件通过props接收父组件的数据，props值是数组，元素是自定义属性

3.使用的时候像data数据一样进行使用

  <div id="app">
        <p>{{msg}}</p>
        <!-- 给组件添加的各种属性会直接作用于组件根节点上，直接与组件根节点的属性（类）进行合并 -->
        <my-com :tt="msg" class="d1">     
        </my-com>
    </div>
    Vue.component("MyCom",{
        template:`<div class="d2">
            {{age}}
            {{tt}}
            </div>`,
            data(){
                return {
                    age:10
                }
            },
     // 接受传递过来的数据,使用的时候可以直接像data一样进行使用
            props:["tt"]
    })
    // 根组件
    var app = new Vue({
        el: "#app",
        data: {
            msg:"hello"
        }
    })

3.子传父

子传父

     1 在父组件定义修改方法，需要传递参数的

     2 在使用子组件的时候通过自定义事件绑定修改方法

     3 在子组件里面在需要的地方通过this.$emit("事件名","子组件数据")进行触发事件并且把子组件数据传递到父组件中

<div id="app">
        <com @p="changeD1"></com>
        {{d1}}
    </div>
<script>
    Vue.component("com", {
        template: `<div>
            <button @click="f1">点击传递数据</button>
            </div>`,
        data() {
            return {
                msg: {
                    txt: "明天出去玩",
                    name: "许美女"
                },
                age: 18
            }
        },
        methods: {
            f1() {
                this.$emit("p", [this.msg, this.age])
            }
        },
    })
    var app = new Vue({
        el: "#app",
        data: {
            d1: ""
        },
        methods: {
            changeD1(e) {
                this.d1 = e[0].name
                console.log(this.d1);
            }
        },
    })
</script>

这篇关于vue中父传子和子传父，传值方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！