简述Vue的组件

最新推荐文章于 2023-08-10 12:28:00 发布

yaya安若

最新推荐文章于 2023-08-10 12:28:00 发布

阅读量422

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42056687/article/details/108121039

版权

1，组件是什么

组件是Vue.js最强大的功能之一，它可以拓展html元素，并可进行封装和重复使用。

2，组件的注册

2.1全局注册

全局注册的方法：Vue.component(‘组件名称’, { }) 第1个参数是组件名称，第2个参数是一个模板对象，当组件全局注册后所有的vue实例都可以使用。
实例：

<body>
    <div id="app">
        <mycm1></mycm1>
    </div>
    <template id="tpl">
      <div>这是第一个自定义组件</div>
    </template>

    <script>
        // 注册组件
        Vue.component('mycm1', {
                template: "#tpl"
            })
            // 创建vue实例
        new Vue({
            el: "#app"
        })
    </script>

</body>

2.1.1局部注册

局部注册组件指的是在创建的vue实例中通过components来创建。
例：

<body>
    <div id="app">
        <mycm1></mycm1>
    </div>
    <template id="tpl">
      <div>这是局部的自定义组件</div>
    </template>

    <script>
        new Vue({
            el: "#app",
            data: {},
            methods: {

            },
            // 局部组件的注册
            components: {
                mycm1: {
                    template: "#tpl"
                }
            }
        })
    </script>

</body>

注：局部注册的组件只能在vue实例中使用。

3，组件传值

3.1父组件向子组件传值

父组件向子组件传值得方式是以属性形式绑定到子组件身上。然后子组件通过props属性接收

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <comy1 :parentmsg="msg"></comy1>
    </div>
    <template id="tmpl">
    <div>
       <h1> 这是子组件的内容+{{parentmsg}}</h1>
    </div>
</template>


    <script>
        //创建 vm 实例对象
        var comy1 = {
            template: '#tmpl',
            props: ['parentmsg']


        }
        const vm = new Vue({
            //指定控制的区域
            el: '#app',
            data: {
                msg: "这是父组件信息"
            },
            methods: {

            },
            components: {
                comy1
            }
        });
    </script>
</body>

3.1.2父组件向子组件传递方法

方法：在父组件中使用v-on对需要传递到的方法进行监听，在子组件中用$emit()进行接收。
例：

<body>
    <div id="app">
        <!-- <temp1 :parentmsg='msg'></temp1>
        <h3 @click='btn'>{{msg}}</h3> -->
        <temp1 :parentmsg='msg' @func='show'></temp1> 
    </div>
    <template id="temp1">
        <div>
            <h3 @click='btn'>这是子组件的内容========{{parentmsg}}<h3>
        </div>
    </template>
    <script>
        var temp1={
            template:'#temp1',
            props:['parentmsg'],
            methods: {
                btn(){
                    // 在子组件 中接收 this.$emit('') 
                    this.$emit('func');
                }
            },
        }
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'这是父组件的内容'
            },methods: {
                btn(){
                    this.msg='修改父组件中的值';
                },
                show(){
                    console.log('调用了父组件的show方法');
                }
            },
            components:{
                temp1
            }
        })
    </script>
</body>

3.2子组件向父组件传值

方法：子组件用 $e m i t () 触发事件，$ emit()第一个参数为自定义的事件名称第二个参数为需要传递的数据，父组件用v-on监听子组件的事件

<body>
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
    </div>
    <script type="text/javascript">
        /*
              子组件向父组件传值-携带参数
            */

        Vue.component('menu-item', {
            props: ['parr'],
            template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                parr: ['apple', 'orange', 'banana'],
                fontSize: 10
            },
            methods: {
                handle: function(val) {
                    // 扩大字体大小
                    this.fontSize += val;
                }
            }
        });
    </script>
</body>