组件通信-子传父

Posted nanjo4373977

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了组件通信-子传父相关的知识,希望对你有一定的参考价值。

<body>
    <div id="app">
        <!-- 3.使用子组件 -->
        <App></App>
    </div>
    <script>
        //全局组件
        //子传父:
        //1.在父组件中绑定自定义事件
        //2.在子组件触发原生的事件,在事件函数通过this.$emit触发自定义的事件

        Vue.component(‘Child‘, {
            template: `
                <div>
                    <h3>我是一个子组件</h3>   
                    <h4>{{childData}}</h4> 
                    <input type="text" @input = ‘handleInput‘/>
                </div>
            `,
            props: [‘childData‘],
            methods: {
                handleInput(e) {
                    const val = e.target.value;
                    this.$emit(‘inputHandler‘, val);
                }
            },
        })

        //1.创建局部组件
        //注意:在组件中这个data必须是一个函数,返回一个对象
        const App = {
            data() {
                return {
                    msg: ‘我是父组件传进来的值‘,
                    newVal: ‘‘
                }
            },
            methods: {
                input(newVal) {
                    this.newVal = newVal
                }
            },
            template: `
                <div>
                    <div class="father">
                        数据:{{newVal}}
                    </div>
                    <child :childData = ‘msg‘ @inputHandler = "input"></child>
                </div>
                
            `,
            computed: {

            },
        }

        new Vue({
            el: ‘#app‘,
            data: {

            },
            components: {
                //2.挂载子组件
                App
            }
        })
    </script>
</body>

 

以上是关于组件通信-子传父的主要内容,如果未能解决你的问题,请参考以下文章

vue 组件通信 (子传父 , 父传子 , 兄弟通信)

组件之间通信(子传父)

组件Vue组件之间的通信父传子 | 子传父

vue中组件间的通信,父传子,子传父

React中的组件通信——父传子子传父Context

Vue组件 父传子 子传父