Vue.js Day03

最新推荐文章于 2024-03-28 16:11:03 发布

灬奔跑的蜗牛灬

最新推荐文章于 2024-03-28 16:11:03 发布

阅读量149

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_16183731/article/details/87927854

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js 组件
//使用Vue.component（‘组件名称’，创建出来的组件模板对象）Vue.component(‘mycom’,com);
使用 Vue.component 定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时两个单词之间用 （-） 连接。

//使用Vue.component（'组件名称'，创建出来的组件模板对象）
Vue.component('myCom',com);
<my-com></my-com>

<div id = 'app'>
			<!-- 如果要使用组件，直接把组件名称，以html 标签的形式，引入到页面即可。 -->
            <my-com></my-com>
      </div>

<script>
          //使用Vue.extend 来创建全局的Vue 组件
          var com = Vue.extend({
              //通过template 属性，指定了组件要展示的HTML 结构
              template:'<h1>这里使用Vue.extend  组件</h1>'
          })
	//使用Vue.component（'组件名称'，创建出来的组件模板对象）
          Vue.component('mycom',com);

          var vue = new Vue({
              el:'#app',
              data:{
              },
              methods:{
              }
          })
</script>

第二种方式创建组件

//方式二
Vue.component('mui',Vue.extend({
                template:'<h2> 这里是H2</h2>'
            }))
//方式三
Vue.component('mui3',{
                template:'<p>33.6</p>'
            })

无论以哪种方式创建的组件，只能有一个根元素；

//错误的
template:'<span></span> <span></span>'

//正确
template:'<span> <span></span></span>'

方式三
在被控制的 #app 外面，使用template 元素，定义组件的Html 模板结构.

<div id = 'app'>
<!-- 如果要使用组件，直接把组件名称，以html 标签的形式，引入到页面即可。 -->
         <my-com></my-com>
         <out></out>
</div>
     
<!-- 在 被控制的 #app 外面，使用template 元素，定义组件的Html 模板结构 -->
<template id = 'temp1'>
    <div>
        <h3> 这是用过外部template 创建的组件</h3>
    </div>
</template>

 //在控制的ｄｉｖ　外部定义组件
 Vue.component('out',{
      template:'#temp1'
  })

定义内部私有组件

<div id = 'app'>
<!-- 如果要使用组件，直接把组件名称，以html 标签的形式，引入到页面即可。 -->
  <my-com></my-com>
  <out></out>
  <log></log>
</div>

-----------------------------
 var vue = new Vue({
                el:'#app',
                data:{

                },
                methods:{

                },
                components:{
                    log: {
                        template:'<h2> 这里是H2</h2>'
                    }
                }
            })

组件中的 data
– 组件可以有自己的 data 数据。
– 组件的 data 和实例的 data 有点不一样，实例中的 data 可以为一个对象，但是组件中的 data 必须是一个方法。
– 组件中的data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行。
– 组件中的data数据，使用方式，和实例中的 data 使用的方式完全一样。

<div id = 'app'>
			<!-- 如果要使用组件，直接把组件名称，以html 标签的形式，引入到页面即可。 -->
            <my-com></my-com>
            <out></out>
            <log></log>
            <mui2></mui2>
            <mui2></mui2>
            <mui2></mui2>
</div>
----------------------------------------------
<template id='count'>
     <div>
          <input type="button" value="+1" @click="increament">
          <h3>{{count}}</h3>
      </div>
</template>
----------------------------------------------
 Vue.component('mui2',{
                template:'#count',
                data:function(){
                    //放置多个组件是的数据安全问题
                    return {
                        count:0
                        };
                },
                methods:{
                    increament(){
                        this.count++;
                    }
                }
            })

vue提供 component 来展示对应的组件
component 是一个占位符， :is 属性，可以用来指定要展示的组件的名称

<div id = 'app'>
			<!-- 如果要使用组件，直接把组件名称，以html 标签的形式，引入到页面即可。 -->
            <my-com></my-com>
            <out></out>
            <log></log>
            <mui2></mui2>
            <mui2></mui2>
            <mui2></mui2>
            <!-- component 是一个占位符， :is 属性，可以用来指定要展示的组件的名称 -->
            <component :is="conpent"></component>
            <input type="button" value="mui" @click="conpent='mui'">
            <input type="button" value="mui2" @click="conpent='mui2'">
</div>
        -------------------------------
        Vue.component('mui',Vue.extend({
                template:'<h2> 这里是H2</h2>'
            }))

            Vue.component('mui3',Vue.extend({
                template:'<h2> 这里是H3</h2>'
            }))

var vue = new Vue({
                el:'#app',
                data:{
                    conpent:'mui'
                },
                methods:{

                },
                components:{
                    log: {
                        template:'<h2> 这里是H2</h2>'
                    }
                }
            })

      -------------------------

通过　 ｍｏｄｅ　属性，设置组件切换时候的　模式

 <style>
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateX(150px)
            }

            .v-enter-active,.v-leave-active{
                transition: all 0.8s ease;
            }
</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id = 'app'>
			<!-- 如果要使用组件，直接把组件名称，以html 标签的形式，引入到页面即可。 -->
            <my-com></my-com>
            <out></out>
            <log></log>
            <mui2></mui2>
            <mui2></mui2>
            <mui2></mui2>
            <!-- component 是一个占位符， :is 属性，可以用来指定要展示的组件的名称 -->
            <transition mode = 'out-in'>
                    <component :is="conpent"></component>
            </transition>
            <input type="button" value="mui" @click="conpent='mui'">
            <input type="button" value="mui3" @click="conpent='mui3'">
</div>
----------------------------------
Vue.component('mui',Vue.extend({
                template:'<h2> 这里是H2</h2>'
            }))

 Vue.component('mui3',Vue.extend({
                template:'<h2> 这里是H3</h2>'
            }))

var vue = new Vue({
                el:'#app',
                data:{
                    conpent:'mui'
                },
                methods:{

                },
                components:{
                    log: {
                        template:'<h2> 这里是H2</h2>'
                    }
                }
            })

父组件向子组件传值
默认情况下，子组件中，默认无法访问到父组件中的 data 上的数据，和 methods 中的方法。

var vue = new Vue({
                el:'#app',
                data:{
                    conpent:'mui',
                    msg:'父组件中的 数据'
                },
                methods:{

                },
                components:{
                    log: {
                    //默认情况下，子组件中，默认无法访问到父组件中的 **data** 上的数据，和 **methods** 中的方法。
                        template:'<h2> 这里是H2 {{msg}}</h2>'
                    }
                }
            })

父组件，可以在引用子组件的时候，通过属性绑定**（v-bind)** 的形式，把需要传递给子组件的数据，以属性绑定的形式，传递带子组件的内部，供子组件使用。
//把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，才能使用这个数据.
//注意：组件中的所有的props 中的数据，都是通过父组件传递给子组件的.
props 中的数据是只读属性，无法重新赋值

 var vue = new Vue({
                el:'#app',
                data:{
                    conpent:'mui',
                    msg:'父组件中的 数据'
                },
                methods:{

                },
                components:{
                    //子组件中的 data 数据， 并不是通过，父组件 传递过来的，而是子组件自身私有的
                    //data 上的数据，都可以可读可写
                    data(){
                        return {
                            title:'组件',
                            content:'huhu'
                        }
                    }
                    log: {
                        template:'<h2> 这里是H2 {{parentmsg}}</h2>',
                        //把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，才能使用这个数据
                        //注意：组件中的 所有的props 中的数据，都是通过父组件传递给子组件的。
                        //props 中的数据 是只读属性，无法重新赋值
                        props:['parentmsg']
                    }
                }
            })