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

父组件向子组件中传值

　　1. Vue实例可以看做是大的组件，那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系。

　　　2. 父子组件在默认的情况下，子组件是无妨访问到父组件中的数据的，所以要想在子组件中使用父组件的数据的时候，就需要以属性绑定的形式，将父组件的数据传递到子组件中。

　　 3. 通过属性绑定传递来的数据无法再子组件中直接使用，需要在props中重新定义以后才可以使用。例：props：['变量名']。props是一个数组。

　　 4. 子组件中的data数据都是私有，子组件可以通过ajax请求到的数据放到data上使用。

　　 5. props：[ ]中的数据都是只读的，不可以进行改变，如果强行改变页面也会显示改变后的效果，但是会有警告。

<body>
    <div id="app">
        <com1 v-bind:fudata="msg"></com1>
    </div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '这是父组件中的数据----1234'

        },
        components: {
            com1: {
                template: '<h1>这是子组件----5678---------{{fudata}}</h1>',
                props: ['fudata']
            }
        },

    })
</script>

父组件向子组件传递方法

　　　　1. 子组件要想获得父组件中的方法，需要使用时间绑定机制。

　　　 2. 在子组件中要想使用父组件传递过来的方法，需要用到一个新的方法 this.$enit.('方法名')

<!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">
    <title>Document</title>
    <script src="./lib/Vue.js"></script>
</head>

<body>
    <div id="app">
        <com1 @func="show"></com1>
    </div>
    <template id="ttpp">
        <div>
            <h1>子组件</h1>
            <input type="button" value="通过点击来获得父组件上的方法" @click="self"> 
        </div>
    </template>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            show() {
                console.log("OK")
            }
        },
        components: {
            com1: {
                template: '#ttpp',
                methods: {
                    self() {
                        this.$emit('func');
                    }
                }
            },
        },

    })
</script>

</html>

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

猜你喜欢