Vue基础（二）

目录

子组件的建立

全局子组件

局部子组件

父子组件的数据传输props

静态传输和动态传输

当子组件需要传递很多数据的时候，父组件data中的数值用对象

数据变量在父组件和子组件中的命名

数据传输时候进行校验

单向数据传递，父组件向子组件传递数据

no-props

dom节点添加no-props属性

子组件中有多个dom节点，添加no-props属性

子组件其他地方也可以调用父组件的no-props属性

通过绑定事件父子组件可以信息传递

在父组件中写函数方法

在子组件中写函数方法

通过v-model进行双向绑定数据传输

v-model的修饰符的应用modelModifiers

slot插槽

slot的基本定义

具名插槽

插槽的作用域为子组件的data

动态组件

异步组件

爷爷组件向孙子组件传递数据 provide和inject

从vue框架中获得DOM节点和组件

---

这一篇主要将子组件和父组件

子组件的建立

    <div id="root"></div>
    <script>
        const app =Vue.createApp({

            template:`<div><hello/><world/></div>`
        });
        app.component('hello',{
            template:`<div>hello</div>`
        });
        app.component('world',{
            template:`<div>world</div>`
        });
        const vm = app.mount('#root');
    </script>

全局子组件

  <div id="root"></div>
    <script>
        const app =Vue.createApp({

            template:`<div><count/><count-child/></div>`
        });
 
        // 是全局组件，在vue里面可以使用，也可以被其他组件调用
        // 当组件没有在vue中调用，但是组件一旦创建了，就挂在vue上，也就是占内存，所以性能不高
        app.component('count',{
            data(){
                return {
                    num:1
                }
            },
            
            template:`<div @click='num+=1'>{
  {num}}</div>`
        });
        app.component('count-child',{
            template:`<count/>`
        });
        const vm = app.mount('#root');
    </script>

局部子组件

  <div id="root"></div>
    <script>
            // 局部组件，变量命名的时候用大写，便于区分
         const Count ={
            data(){
                return {
                    num:1
                }
            },
            template:`<div @click='num+=1'>{
  {num}}</div>`
        };

        const Hello ={
            template:`<div>hello world</div>`
        }
        const app =Vue.createApp({
            components:{
                'count': Count,
                "hello": Hello,
            },

            template:`<div><count/><hello/></div>`
        });
        const vm = app.mount('#root');          
    </script>

父子组件的数据传输props

父组件的数据通过在template中定义传给子组件的props，在有子组件的template中调用

静态传输和动态传输

静态的数据传输是字符串，而动态的数据传输通过板顶data

    <div id="root"></div>
    <script>
        const app= Vue.createApp({
            data(){
                return{
                    num2:123
                }
            },

            // 直接数据传入的是静态数据传值，例如num1
            // 通过与data绑定数据传值的，是动态数据，例如num2
            template:`<div>hello<count/><test num1="123" :num2='num2'/></div>`

        });
        app.component('test',{
            //由父组件给子组件传递值
            props:['num1','num2'],
            template:`hello world,{
  {typeof num1}}{
  {typeof num2}}`
        });

        const vm = app.mount('#root')
    </script>

当子组件需要传递很多数据的时候，父组件data中的数值用对象

 <div id="root"></div>
    <script>
        const app= Vue.createApp({
            data(){
                return{
                    num1:{
                        name:'xiaoming',
                        age:18,
                        sex:"男"
                    }
                }
            },
            // 子组件需要大量的传入数据的时候，可以绑定对象名，但是后面需要写键名
            template:`<div>hello<test v-bind='num1'/></div>`
        });
        app.component('test',{
            //由父组件给子组件传递值
            props:['name','age','sex'],
            template:`<div>{
  {name}}--{
  {age}}--{
  {sex}}</div>`
        });
        const vm = app.mount('#root')
    </script>

数据变量在父组件和子组件中的命名

在父组件中变量小写用短横连接，在子组件中接收的时候，要用驼峰法接收

    <script>
        const app= Vue.createApp({
            data(){
                return{
                    content:1234
                }
            },
            // 子组件需要大量的传入数据的时候，可以绑定对象名，但是后面需要写键名
            template:`<div>hello<test :content-num='content'/></div>`
        });
        app.component('test',{
            //由父组件给子组件传递值
            props:['contentNum'],
            template:`<div>{
  {contentNum}}</div>`
        });
        const vm = app.mount('#root')
    </script>

数据传输时候进行校验

校验数据的类型，默认值的设置，以及更加具体的要求

<div id="root"></div>
    <script>
        const app= Vue.createApp({
            data(){
                return{
                    num1:123
                }
            },
            template:`<div>hello<test :num1='num1'/></div>`
        });
        app.component('test',{
            //由父组件给子组件传递值
            props:{
             //type:基本数据类型，引用数据类型，函数都可以，不满足要求会提醒报错
             //required 要求数据必须传入
             //default 当没有数据传入的时候 默认传入数据
                num1:{