组件相关整理

最新推荐文章于 2022-05-05 22:12:23 发布

心思行随

最新推荐文章于 2022-05-05 22:12:23 发布

阅读量260

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_54693647/article/details/116991044

版权

组件注册

一.全局组件注册

Vue.component('组件名称'，{
data:'组件数据'，
template:'组建模板内容'
})

实例：

<body>
//组件用法
    <div id="app">
        <button-counter></button-counter>
    </div>
    <template id="temp">
        <button @click='count++'>点击了{{count}}次</button>
    </template>
    <script src="./js/vue.js"></script>
    <script>
    //定义一个名为button-counter的新组建
        Vue.component('button-counter',{
            data(){
                return {
                    count:0
                }
            },
            template:'#temp'
        })
        var vm = new Vue({
            el: '#app',
            data:{
            },
            methods:{
            }
        })
    </script>
</body>

组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

组件命名方式

1.短横线方式

Vue.component('my-component',{})

2.驼峰方式

Vue.component('MyComponent',{})

二.局部组件注册

<body>
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
        <component-c></component-c>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //定义组件的模板
        var ComponentA = {
            data() {
                return {
                    msg: 'ComponentA'
                }
            },
            template: '<div>{{msg}}</div>'
        };
        var ComponentB = {
            data() {
                return {
                    msg: 'ComponentB'
                }
            },
            template: '<div>{{msg}}</div>'
        };
        var ComponentC = {
            data() {
                return {
                    msg: 'ComponentC'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var vm = new Vue({
            el: '#app',
            //局部组件注册
            components: {
                'component-a': ComponentA,
                'component-b': ComponentB,
                'component-c': ComponentC
            }

        })
    </script>

PS:以上方式注册的组件只能在其父组件中使用

三.Vue组件之间的传值

1.父组件向子组件传值

子组件向父组件传值基本用法：

1.在父组件中给子组件标签添加自定义属性。

<div id="app">
        <menu-item title="来自父组件的值"></menu-item>
        <menu-item :title="pmsg"></menu-item>
    </div>

2.然后子组件在其内部通过props接收组件身上被添加的自定义属性

 <script>
        //全局下创建的子组件
        Vue.component('menu-item', {
            props: ['title'],
            data() {
                return {
                    msg: '子组件的本身的内容'
                }
            },
            template: '<div>{{title}}</div>'
        });
        //vm实例是父组件
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件内容',
            }
        });
    </script>

3.methods或者生命周期函数或者计算属性等访问通过 this.名字

2.子组件向父组件传值

子组件向父组件传值基本用法：

在父组件中，给子组件标签绑定自定义事件；
在子组件中，想办法去触发绑定在自己身上的自定义事件（this$emit（自定义事件名））；
$emit可以在子组件中通过点击按钮，触发一个点击事件来执行
$emit还可以在生命周期函数里执行
当子组件成功执行$emit之后，子组件身上的自定义事件触发，此时该自定义事件对应的事件执行函数执行。

<body>
    <div id="app">
        <h1>展示子组件传递来的数据---{{smsg}}</h1>
        <son @my-event='handle'></son>
    </div>
    <!-- 子组件模板 -->
    <template id="temp">
        <div>
            <h1>子组件区域---{{son_msg}}</h1>
            <button @click='clickhandle'>传递数据给父</button>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('son', {
            data() {
                return {
                    son_msg: 'son的数据'
                }
            },
            template: '#temp',
            methods: {
                clickhandle() {
                    this.$emit('my-event', this.son_msg)
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                smsg: ''
            },
            methods: {
                handle(val) {
                    console.log(1);
                    this.smsg = val
                }
            }
        })
    </script>
</body>

3.兄弟之间的传值

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
提供事件中心 var hub = new Vue()
在每个兄弟组件上添加hub.$emit(方法名，传递的数据)触发自定义事件
在mounted(){} 钩子中触发hub.$on()方法名添加监听事件
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

<body>
    <div id="app">
        <div>父组件</div>
        <div>
            <button @click='handle'>销毁证据</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        //1.提供事件中心
        var hub = new Vue();

        Vue.component('test-tom', {
            data() {
                return {
                    num: 0
                }
            },
            template: `
            <div>
            <div>TOM:{{num}}</div>
            <div>
                <button @click='handle'>点击</button>
            </div>
        </div>`
            ,
            methods: {
                handle() {
           //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
                    hub.$emit('jerry-event', 1);
                }
            },
            mounted() {
            // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
                hub.$on('tom-event', (val) => {
                    this.num += val
                })
            }
        });

        Vue.component('test-jerry', {
            data() {
                return {
                    num: 0
                }
            },
            template: `
            <div>
            <div>JERRY:{{num}}</div>
            <div>
                <button @click='handle'>点击</button>
            </div>
        </div>`,
            methods: {
                handle() {
                    hub.$emit('tom-event', 2)
                }
            },
            mounted() {
                hub.$on('jerry-event', (val) => {
                    this.num += val;
                });
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                handle() {
             //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据 
                    hub.$off('tom-event');
                    hub.$off('jerry-event');

                }
            }

        })
    </script>
</body