首页 > 博客列表 > VUE父子组件之间通信

博主信息

博文 45

粉丝 0

访问量 33424

专题推荐

更多>

组件

从形式上看是一个自定义html标签；
组件是可复用的vue实例，是构造函数Vue的子类

<!-- 挂载点：是隐式声明的根组件 -->
    <div id="app">
        <child-compoent></child-compoent>
    </div>
<script>
//创建
    const childCompoent = Vue.extend({
        template: `<h1>hello</h1>`,
    });
    //注册
    //使用Vue.component()注册的是全局组件
    Vue.component("child-compoent", childCompoent);
    //挂载
    const vm = new Vue({
        el: '#app',
    });
</script>

全局组件

全局可见，声明在vue实例外部,全局组件可以在多个vue实例中共享,建议通常一个项目只有一个vue实例，尽可能不要使用全局组件，应该使用局部组件代替；

 <div id="app">
        <button-inc></button-inc>
    </div>
    <div id="root">
        <button-inc></button-inc>
    </div>
    <template id="inc">
        <div>
            <button @click='count++'>点赞：+{{count}}</button>
        </div>
    </template>
<script>
    Vue.component('button-inc', {
        //组件中的模板代码：允许存在数据占位符的html字符串
        //模板内容必须写到一对父元素中
        // template: `
        //     <div>
        //         <button @click='count++'>点赞：+{{count}}</button>
        //         </div>
        // `,
        template: '#inc',
        //组件中必须使用函数data（）来声明组件变量
        data() {
            return {
                count: 0,
            }
        }
    });
    const vm = new Vue({
        el: '#app',
    })
    const vm1 = new Vue({
        el: '#root',
    })
</script>

局部组件

局部组件是属于vue实例的,components

<body>
    <div id="app">
        <hello></hello>
    </div>
    <!-- <template id="hello">
        <p>hello {{site}}</p>
    </template> -->
<script>
    //局部组件
    const hello = {
        template: `<p>hello {{site}}</p>`,
        data() {
            return {
                site: 'php',
            }
        },
    }
    const vm = new Vue({
        el: '#app',
        components: {
            // myChild: {
            //     // template: `<p>hello {{site}}</p>`,
            //     template: '#hello',
            //     data() {
            //         return {
            //             site: 'php',
            //         }
            //     },
            // }
            //简化
            hello,
        }
    })
</script>
</body>

父组件向子组件传参

组件之间的数据传递是单向的，不允许在子组件中更新父组件中的数据

<body>
    <div id="app">
        <like :my-name='username' :my-count='count'></like>
    </div>
</body>
<script>
    const like = {
        props: ["myName", "myCount"],
        template: `
            <div>
                <button @click='num++'> 点赞:+{{num}}</button>
                <span> {{myName}} </span>
                </div>
        `,
        data() {
            return {
                num: this.myCount,
            }
        },
        // methods: {
        //     inc(n) {
        //         this.num += n;
        //     }
        // }
    }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                username: '你好1',
                count: 0,
            }
        },
        components: {
            like
        }
    })
    console.log(vm.count);

子组件向父组件传参

子组件中更新父组件的数据是通过事件完成(子组件向父组件传参是通过声明同名事件来实现的)
$emit(‘父组件中要使用的方法名称’,子组件要传给父组件的值)

<body>
    <div id="app">
        <like :my-name='username' :my-count='count' @click-count='handle'></like>
    </div>
</body>
<script>
    const like = {
        props: ["myName", "myCount"],
        template: `
            <div>
                <button @click="$emit('click-count',10)" > 点赞:+{{myCount}}</button>
                <span> {{myName}} </span>
                </div>
        `,
    }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                username: '你好1',
                count: 0,
            }
        },
        components: {
            like
        },
        methods: {
            handle(value) {
                console.log(this.count);
                this.count += value;
                this.username = 'admin'
            }
        }
    })
    console.log(vm.count);
</script>

组件之间双向传参

<!-- 模拟v-model指令的实现过程 -->
    <div id="demo">
        <input type="text" :value='value' @input.lazy="value=$event.target.value">
        <p>{{value}}</p>
    </div>
    <hr>
    <div id="app">
        <p>父组件：{{price}}元</p>
        <my-input :my-price='price' @input-text='handle'></my-input>
    </div>
<script>
    const vue = new Vue({
        el: '#demo',
        data() {
            return {
                value: 123
            }
        }
    })
    const myInput = {
        props: ["my-price"],
        // template: `
        // <input type="number" :value='myPrice' @input="$emit('input-text',$event.target.value)">
        // `,
        template: `
        <input type="number" :value='myPrice' @input="foo">
        `,
        methods: {
            foo(ev) {
                this.$emit('input-text', ev.target.value)
            }
        }
    }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                price: 4999,
            }
        },
        components: {
            myInput
        },
        methods: {
            handle(value) {
                console.log(value);
                this.price = value;
            }
        }
    })
</script>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1209列表元素

2021-02-25 12:34:22

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

组件

全局组件

局部组件

父组件向子组件传参

子组件向父组件传参

组件之间双向传参