Vue学习(5)父子组件的简单通信

最新推荐文章于 2024-06-22 02:20:01 发布

ssqsssq

最新推荐文章于 2024-06-22 02:20:01 发布

阅读量167

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43778744/article/details/105230865

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单通信

父—>子
1.父组件绑定自定义属性
2.子组件props接收
3.子组件任意使用
子—>父
1.父组件绑定自定义方法
2.子组件 $emit(‘事件名’, value) 触发
3.传入父组件

<!--
 * @Author: your name
 * @Date: 2020-03-31 19:50:40
 * @LastEditTime: 2020-03-31 20:17:31
 * @LastEditors: Please set LastEditors
 * @Description: 父子组件的简单通信
 * @FilePath: \x\06.html
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 全局组件的创建
        // 第一个是组件名，第二个是配置选项

        // 子传父
        // 1.在父组件绑定自定义事件
        // 2.子组件触发$emit()

        Vue.component('Child', {
            template: '<div><p>I am child</p>\
                <input type="text" v-model="childData" @input="changeValue(childData)"></div>',
            props: ["childData"],
            methods: {
                changeValue(val) {
                    // 自定义事件一定通过 $emit 去触发
                    // $emit(自定义的事件名。消息)
                    this.$emit('childHander', val)
                }
            },
        })

        // 父传子
        // 1.先给父组件绑定自定义属性
        // 2.子组件props接收数据，可以在子组件任意使用
        Vue.component('Parent', {
            data() {
                return {
                    msg: 'father msg'
                }
            },
            template: '<div><Child :childData="msg" @childHander="childHander" /></div>',
            methods: {
                childHander(val) {
                    console.log(val)
                }
            },
        })



        // 局部组件
        var App = {
            data() {
                return {

                }
            },
            methods: {
                clickButton(e) {
                    console.log(this)
                }
            },
            components: {},
            template: '<Parent />'
        };
        console.log(App)
        var vm = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            // 挂载子组件
            components: {
                App
            },
            // 父组件可以直接使用
            template: '\
                 <App></App>\
             '
        });
        console.log(vm)
    </script>
</body>

</html>

ssqsssq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(5)父子组件的简单通信

简单通信父—>子1.父组件绑定自定义属性2.子组件props接收3.子组件任意使用子—>父1.父组件绑定自定义方法2.子组件 $emit(‘事件名’, value) 触发3.传入父组件<!-- * @Author: your name * @Date: 2020-03-31 19:50:40 * @LastEditTime: 2020-03-31 20...
复制链接

扫一扫

专栏目录