Vue基础学习 --- 组件传值

父组件->子组件

<!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="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 01. 在son标签中, 添加一个属性 注意：使用msg属性传值时，f2s前加：-->
        <son :f2s='msg'></son>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'hello world'
                }
            },
            methods: {},
            components: {
                // 组件名：组件参数
                son: {
                    // 03组件中接收到的值的使用
                    template: '<h2>{{f2s}}</h2>',
                    // 02props属性接收
                    props: ['f2s']
                }
            }
        });
    </script>
</body>

</html>

小结

在son标签中添加属性f2s（属性名可以随意起）、要传的值
在子组件中使用props接收, 然后template中使用

子组件->父组件

<!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="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 02. 引用组件 
            funfromson为子组件中$emit的第一个参数 
            fathermethod为父组件中用于接收参数的方法-->
        <son @funfromson="fathermethod"></son>
    </div>

    <script>

        const vm = new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                // 03-父组件中接收子组件传参的方法，参数就是传的值
                fathermethod(data) {
                    alert('收到子组件的数据' + data)
                }
            },
            components: {
                son: {
                    template: '<button @click="send2f">点击了子组件</button>',
                    methods: {
                        send2f() {
                            // 01-子组件->父组件通过this.$emit('父组件中引用子组件中的方法名','要传的参数')
                            this.$emit('funfromson', 'xxxx');
                        },
                    },
                }
            }
        });
    </script>
</body>

</html>

小结

示例中子组件是一个按钮, 当点击按钮时, 触发按钮的点击事件, 调用子组件的send2f方法

在send2f方法中通过this.$emit()调用父组件的方法, 并将数据做为参数传递过去

Vue基础学习 --- 组件传值

小结

小结

猜你喜欢