Vue2.0最基础的组件使用

桃扇骨 2024-04-08 10:12 39阅读 0赞

### 一、全局组件与局部组件的认识 ###

<div id="app">
            <child-comp1></child-comp1>
            <child-comp2></child-comp2>
        </div>
        <div id="app2">
            <child-comp1></child-comp1>
            
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
        <script>
            //全局组件：任何一个vue实例当中都可以使用
            Vue.component('ChildComp1', {
                template: '<h2>A child 11111111111!!!</h2>'
            })
    
            //局部组件：只能在注册它的vue实例中使用
            const app = new Vue({
                el: '#app',
                components: {
                    ChildComp2:{
                        template:'<h2>A child 22222222222!!!</h2>'
                    }
                },
                data: {
    
                },
                methods: {
    
                }
            })
            const app2=new Vue({
                el:'#app2',
                components:{
    
                },
                data:{
    
                },methods:{
    
                }
            })
        </script>

### 二、使用组件时自定义参数的传递（给子组件传参） ###

<body>
        <div id="app">
            <child name="zhangsan" age="18"></child>
            <child name="lisi" age="20"></child>
        </div>
        <template id="child">
            <div>
                <h1>你好鸭，我是{
       {name}},我今年{
       {age}}岁了</h1>
            </div>
        </template>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                components: {
                    child: {
                        template: '#child',
                        props: ['name', 'age']
                    }
                }
            })
        </script>
    </body>

组件和函数类似，可以通过接收参数来是自己具备一定的通用性。函数注册时有形参，函数调用的时候有实参，由此，组件注册的时候也需要决定一下组件的形参，写法上虽略有不同，但核心思想是一样的。通过props，最简单的一种，以数组的方式。接收几个参数，就在数组中添加几个形参名。光有形参是不够的，在使用时需要给一个实参，在标签里加上对应属性即可。

### 三、组件开始具备一定功能，管理自己的一些状态 ###

以上都是最简单的组件，仅用来了解组件的基本使用方法，当组件具备一些比较复杂的功能，需要管理自己的一些状态时：

<body>
        <div id="app">
            <child name="zhangsan" age="18"></child>
            <child name="lisi" age="20"></child>
        </div>
        <template id="child">
            <div>
                <h1>你好鸭，我是{
       {name}},我今年{
       {age}}岁了</h1>
                <p>{
       {count}}</p>
                <button @click="count++">+++</button>
            </div>
        </template>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                components: {
                    child: {
                        template: '#child',
                        props: ['name', 'age'],
                        data(){
                            return{
                                count:0,
                            }
                        }
                    }
                }
            })
        </script>
    </body>

每次使用组件时调用data函数，调用时返回一个对象，使得子组件之间执行自己功能时互不干扰，组件复用时都有自己独立的对象。

**data为什么是一个函数而不是对象？**

vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

### 四、子组件向父组件传递 ###

首先，在接收方也就是父组件当中定义一个自定义事件；然后，在子组件当中找到合适时机触发父组件中的自定义事件，触发的方式是通过**this.$emit('自定义事件'，'传递内容')**；接收通过在自定义事件的处理函数当中用形参接住就可以了。

<body>
        <div id="app">
            <child name="zhangsan" age="18" @response="(msg)=>child1=msg"></child>
            <p>{
       {child1}}</p>
            <child name="lisi" age="20" @response="(msg)=>child2=msg"></child>
            <p>{
       {child2}}</p>
        </div>
        <template id="child">
            <div>
                <h1>你好鸭，我是{
       {name}},我今年{
       {age}}岁了</h1>
                <p>{
       {count}}</p>
                <button @click="count++">+++</button>
                <button @click="send">send</button>
            </div>
        </template>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                components: {
                    child: {
                        template: '#child',
                        props: ['name', 'age'],
                        data() {
                            return {
                                count: 0,
                            }
                        },
                        computed: {
    
                        },
                        methods: {
                            send() {
                                //在子组件中向父组件传递信息的方式==>触发父组件中的自定义事件
                                this.$emit('response', this.name)
                            }
                        }
                    }
                },
                data: {
                    child1: '',
                    child2: ''
                },
                methods: {
                    //接受子组件传递的信息
                    // fn(message) {
                    //     this.child1=message
                    // }
                }
            })
        </script>
    </body>