VUE的组件，父子组件

最新推荐文章于 2023-12-01 20:32:51 发布

深海鱼0110

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量90

点赞数

分类专栏：蜗牛学前端

本文链接：https://blog.csdn.net/weixin_39193977/article/details/116024906

版权

蜗牛学前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件

a)、全局组件

组件：将公用的功能抽离出来，形成组件，目的就是复用代码

全局组件必须写在Vue实例创建之前，才在该根元素下面生效

全局组件 demo是组件的名字，后面{}是组件的内容

组件中的data必须是个方法，通过return map来定义数据

<body>
<div id="app">
<!--为了代码复用，所以能看到多个组件-->
<!--    <demo></demo>-->
<!--    <demo></demo>-->
    <demo></demo>
    <demo-key></demo-key>

</div>
<script src="vue.js"></script>
<script>
    // 组件：将公用的功能抽离出来，形成组件，目的就是复用代码
    // 全局组件 demo是组件的名字，后面{}是组件的内容
    Vue.component('demo',{
        template:'<h1 @click="change">{{msg}}</h1>',
        //组件中的data必须是个方法，通过return map来定义数据
        // 组件必须是个方法，是因为会被多个地方使用，来数据隔离
        data:function () {
            return{
                msg:'msg'
            }
        },
        methods:{
            change:function () {
                this.msg = 'test'
            }
        }
    })
    //用vue接管了#app 然后用写好的组件去渲染页面
    new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            'demo-key':{
                template: '<h1 @click="change">{{msg}}</h1>',
            data:function () {
                return{
                    msg:0
                }
            },
                methods:{
                    change:function () {
                        this.msg++
                    }
                }
            }
        }
    })
</script>
</body>

b)、局部组件

局部组件注册方式，直接在Vue实例里面注册

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  new Vue({
    el: "#app1",
    components:{
      "child-component":{
        template:"<h1>我是局部组件</h1>"
      }
    }
  });

局部组件需要注意：

1.属性名为components，s千万别忘了;

2.套路比较深，所以建议模板定义在一个全局变量里，代码看起来容易一点，如下：（模板标签比较多的时候，这样子写更加简洁规整）

<body>
  <div id="app1">
    <child-component></child-component>
  </div>
  <script>
    var child={
      template:"<h1>我是局部组件</h1>"
    };
    new Vue({
      el: "#app1",
      components:{
        "child-component":child
      }
    });
  </script>
</body>

父子组件的交互

vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<body>
<div id="app">
<!--  change再去触发countAdd的方法，父组件的count就自动加了-->
<!--  父组件就是div id="app"这个区域，子组件就是引用的组件-->
  <number @change="countAdd"></number>
  <number @change="countAdd"></number>
  <div>父组件-<span>{{count}}</span></div>

</div>

<script src="vue.js"></script>

<script>
  //实现的是 子组件点击数字就加1，父组件也+1，父组件是两个子组件的和
  Vue.component('number',{
    template:'<div>子组件-<span @click="add">{{num}}</span></div>',
    data:function (){
      return{
        num:0
      }
    },
    methods:{
      add:function (){
        this.num++
        //告诉父组件+1了
        this.$emit('change')
        //触发了一个change方法，这个change方法绑定在子组件上
      }
    }
  })

  new Vue({
    el:'#app',
    data:{
      count:0
    },
    methods: {
      countAdd:function () {
        this.count++
      }
    }
  })
</script>
</body>

深海鱼0110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE的组件，父子组件

组件组件a)、全局组件组件：将公用的功能抽离出来，形成组件，目的就是复用代码全局组件必须写在Vue实例创建之前，才在该根元素下面生效全局组件 demo是组件的名字，后面{}是组件的内容组件中的data必须是个方法，通过return map来定义数据<body><div id="app"><!-- <dem
复制链接

扫一扫