Vue.js组件

小zhang~

已于 2024-03-31 20:53:59 修改

阅读量800

点赞数 28

文章标签： vue.js javascript ecmascript

于 2024-03-31 19:31:00 首次发布

本文链接：https://blog.csdn.net/2301_80244491/article/details/137197702

版权

本文介绍了Vue.js中全局组件和局部组件的概念，强调了如何通过`v-model`和`props`进行数据交互，以及组件嵌套的实现方式。重点讲解了prop的单向数据绑定原则。

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

全局组件

所有实例都能用全局组件。
注意Vue要求组件模板只能有一个根元素，通过将所有内容包裹在一个根元素中，vue可以准确地映射组件模板到实际DOM结构，并且可以高效更新和管理组件的状态

Vue.component('组件名',配置选项)

    <div class="app">
        <game></game>
    </div>
    <div class="app2">
        <game></game>
    </div>
    <script>
        Vue.component('game',{
            template:`<div>
                <h1>王者荣耀</h1>
                <h2>元梦之星</h2>
                </div>`
        })
        new Vue({
            el:'.app'
        })
        new Vue({
            el:'.app2'
        })
    </script>

效果图
在这里插入图片描述

局部组件

注意这里在哪个实例上面注册哪个实例可以引用

<div class="app">
        <game></game>
    </div>
    <div class="app2">
        <game></game>
    </div>
    <script>
        var gg = {
            template:`
            <div>元梦之星</div>
            `
        }
        new Vue({
            el:'.app',
            components:{
                'game':gg
            }
        })
        new Vue({
            el:'.app2'
        })
    </script>

这里的app2用不了会报错正确代码如下：

<div class="app">
        <game></game>
    </div>
    <div class="app2">
    </div>
    <script>
        var gg = {
            template:`
            <div>元梦之星</div>
            `
        }
        new Vue({
            el:'.app',
            components:{
                'game':gg
            }
        })
        new Vue({
            el:'.app2'
        })
    </script>

效果图
在这里插入图片描述

Prop

== props是子组件访问父组件数据的唯一接口
子组件不能直接在模板里面渲染 data中的数据如果子组件想要引用父元素的数据就在prop里面声明一个变量，这个变量可以引用父元素的数据，父元素发生改变时子元素也跟着改变==
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：
== 注意不要在子元素内部直接修改props的值==

   <div id="app">
       <input type="text" v-model="msg">
       <child :info="msg"></child>
   </div>
   
   <script>
   const child = {
   //引用父元素的msg 
       props:['info'],
   //这里info的内容是props中声明的，值为msg
       template:`
           <span>{{info}}</span>
       `
   }
   const vm = new Vue({
     el: '#app',
     data: {
       msg:1
     },
     components:{
       child
     }
   })
   </script>

效果图
在这里插入图片描述
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来

    <div id="app">
        <div>{{colors}}</div>
        <ol>
            <color v-for="item in colors" :key="item" v-bind:c="item"></color>
        </ol>
    </div>
    
    <script>
    const color = {
        props:['c'],
        template:`<li>{{c}}</li>`
    } 
    const vm = new Vue({
      el: '#app',
      data() {
        return {
            colors:['red','yellow','blue']
        }
      },
      components:{
        color:color
      }
    })
    </script>

效果图
在这里插入图片描述

组件的嵌套

 <div class="app">
        <app></app>
    </div>
    <script>
        const student = {
            template:`
            <div>
                学生姓名：<span>{{name}}</span>
                学生年龄：<span>{{age}}</span>
            </div>
            `,
            data() {
                return {
                    name:'张三',
                    age:21      
                }
            },
        }
        const school = Vue.extend({
            data() {
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            components:{
                student
            },
            template:`
            <div>
                学校名称：{{name}}
                学校地址：{{address}}  
                <student></student>  
            </div>
            `
        }
        )
        const hello = {
            template:`<span>{{hello}}</span>`,
            data() {
                return {
                    hello:'你好'
                }
            }
        }
        const app = {
            components:{
                school,
                hello
            },
            template:`
            <div>
                <school></school>
                <hello></hello>
            </div>
            `
        }
        new Vue({
            el:'.app',
            components:{
                app
            }
        })
    </script>