vue---注册组件、组件之间父子传值

最新推荐文章于 2021-12-26 23:20:46 发布

迷糊小丫丫

最新推荐文章于 2021-12-26 23:20:46 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/weixin_46000410/article/details/109503195

版权

本文详细介绍了Vue中组件的注册方法，包括全局注册和局部注册，并探讨了父子组件之间的数据传递，强调了单向数据流原则。通过props实现父组件向子组件传递数据，使用$emit让子组件触发事件来传递数据给父组件，同时提到了prop的验证机制以确保数据的正确性。

摘要由CSDN通过智能技术生成

一、组件：内部封装html代码

步骤：
1.创建组件
2.组件注册
3.组件使用

全局注册

全局注册A组件
组件被注册在全局范围内，在任何一个Vue实例对应的模板中都可以使用该组件。my-com
示例

<body>
    <div id="app">
        {
  {msg}}
        <br>
        --- 组建的使用---
        <br>
        <my-com></my-com>
    </div>
</body>
<script>
    //1.创建组件
    let myCom = {
        data() {
            return {
                comMsg: "组件数据"
            }
        },
        // 模板
        template: `
                <div>
                <span>{
  {comMsg}}</span>
                <span>{
  {comMsg}}</span>
                <button @click="comMsg='新数据123'">更改数据模型中的数据</button>
                </div>
            `
    };
    
    // 2.组件注册
    // 全局注册
    Vue.component(&#

最低0.47元/天解锁文章

迷糊小丫丫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue---注册组件、组件之间父子传值

一、组件：内部封装html代码步骤：1.创建组件2.组件注册3.组件使用全局注册全局注册A组件组件被注册在全局范围内，在任何一个Vue实例对应的模板中都可以使用该组件。my-com<body> <div id="app"> {{msg}} <br> --- 组建的使用--- <br> <my-com></my-com> &lt
复制链接

扫一扫