vue关于组件传值

首先先了解组件的嵌套（全局嵌套、局部嵌套）因此传值有3种方式，分别是父-子，子-父

我们先来探讨一下父-子之间的传值：

抛出问题：子组件要获取父组件当中的数据；

我们先倒推：一个普通的组件要获取定义的数据我们看图说话

子组件获取自己本身的数据（name）直接是拿过来{{name}}用；

所以：现在的问题是怎么从不是本身数据拿，

1、在子组件标签自定义一个属性名name1取值为父组件传的值，即：name1='title',

2、在vue实例子组件内部有一个props取属性名然后在直接用{{name1}}就可以拿到父组件的值了

props：上图

扫描二维码关注公众号，回复： 7556777 查看本文章

2、子-父之间的传值：子组件数据传到父组件里

首先从两个组件的dom结构与vue中内部组件观察，得知，只有dom里边有父与子的关系，因此利用事件机制的原理，

 
  // events EventEmitter    - emit('事件',数据)  on('事件',()＝>) 
 
  // Vue.prototype.$emit=EventEmitter.emit

在子组件标签内定义一个点击事件来发送给父组件数据，同时在父组件标签内的子组件也自定义一个接受数据的事件。

<!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">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <h2>传值</h2>
    <v-parent></v-parent>
</div>
<template id="parent">
    <div>
        <h3>父组件</h3>
        <p>接受子组件---{{str}}</p>
        <v-child @toparent='getval'></v-child>
    </div>
</template>

<template id="child">
    <div>
        <hr>
        <h2>子组件</h2>
        <p>{{title}}</p>
        <button @click='get()'>发送父组件数据</button>
    </div>
</template>
<!-- 利用事件机制原理，dom里边有父与子的关系，因此应该在dom里边操作，达到传值的目的
1、// events EventEmitter    - emit('事件',数据)  on('事件',()＝>)
// Vue.prototype.$emit=EventEmitter.emit

-->
<script>
    var app =new  Vue({
        el:'#app',
        components:{
          'v-parent':{
            template:'#parent',
            data(){
                return{
                    str:''
                }
            },
            methods:{
                getval(msg){//传过来的实参
                    console.log(msg);
                    this.str=msg;
                }
            },
            components:{
                'v-child':{
                    template:'#child',
                    data(){
                        return{
                            title:'我是被发送子组件'
                        }
                    },
                    methods:{
                        get(){
                            this.$emit('toparent',this.title)
                        }
                    }
                }
            }
           } 
        }
    })
</script>
</body>
</html>

猜你喜欢