Vue学习day05

Vue组件

一 组件化

• 定义全局组件
• 组件的复用
• 局部组件-注册
• 组件通信

1.定义全局组件

我们可以用Vue.component来定义一个组件

Vue.component(组件名称,Vue对象)

示例:

<div id="app">
    <hello></hello>
</div>
<script>
    Vue.component(`hello`,{
       template:`<div>ya ma dei</div>`
    })
    var vm=new Vue({
      el:"#app",
      data:{
    },
    methods:{
    }
    })
</script>

这里要注意的点有:
template中的HTML代码必须要写在一个根元素中
有根元素:


没有根元素:


进阶一:

<div id="app">
<counter></counter>
</div>
<script>
    Vue.component("counter",{
        template:`
        <button @click="num++">加{{num}}</button>
        `,
        data() {
            return {
                num:0
            };
        }
    })
    var vm=new Vue({
    el:"#app"
    })
</script>

进阶二(组件中调用方法):

<div id="app">
      <counter></counter>
</div>
<script>
    Vue.component("counter", {
        template: `
<button @click="add()">加{{num}}</button>`,
        data() {
            return {
                num: 0
            }
        },
        methods:{
            add() {
                this.num++
            }
        }
    })
    var vm = new Vue({
        el: "#app"

    })
</script>

实现效果:

结论:

• 全局组件必须要有一个根元素
• data的定义方式比较特殊,必须是一个函数,且必须有返回值
• 组件渲染需要HTML模板,所以增加了template属性的值就是HTML模板
• 组件也相当于一个Vue实例,因此它在定义有会接收:data,methods,生命周期函数,计算属性等
• 不同的是组件不会与页面元素绑定,否则就无法复用所以没有 el 属性
• 全局组件定义完毕,如何vue实例都可以直接在HTML中通过组件名称来使用主建

组件复用

定义好的组件 可以任意复用多次

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

每个组件互不干扰，都有自己的count值

data属性必须是函数

当我们定义< couter >主建时它的data并不是直接提供一个对象
而是一个组件的data选项必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝

data:function(){
return{
 count:0   }
}

Vue如果没有这条规则 点击一个按钮就会影响到其它所有的实例

<div id="app">
<list></list><br>
<counter></counter>

</div>
<script>
    Vue.component("counter",{
        template: `
    <button @click="num++">加{{num}}</button>`,
        data() {
            return{
                num:0
            }
        },methods:{

        }
    });
    Vue.component("list",{
      template:`<ul>
       <li v-for="user in users">{{user.name}}-{{user.age}}-{{user.sex}}</li>
</ul>`,
        data() {
            return {
                users:[{name:"tom",age:12,sex:"男"},
                       {name:"张三",age:15,sex:"男"},
                       {name:"梨花",age:22,sex:"女"}]
            };
        }
    })
    var vm=new Vue({
       el:"#app"
    })
</script>

局部组件

全局组件和局部组件的区别:
一旦全局注册,就意味着即便以后你不再使用这个组件,他也会随着Vue的加载而加载.
因此对于并不频繁使用的组件我们会采用局部注册

我们先在外部定义一个对象,结构和创建组件时传递的第二个参数一致:

const counter={
template:`<button v-on:click="count++">点击{{count}}</button>`,
      data(){
      return{      count :0
      }
   }
};

然后在Vue中使用它–注册局部组件:

var app =new Vue({
   el:"#app",
   components:{
   //counter :counter//将定义的对象注册为组件
   counter
 }
})

完整代码:

<div id="app">
<counter></counter>
</div>
<script>
    const counter={
      template:`<button @click="count++">点击{{count}}</button>`,
      data() {
          return {
            count:0
          };
      }
    }
    var app = new Vue({
        el:"#app",
        components:{
            counter
        }

    })
</script>

1. components就是当前vue对象子组件集合

1. 其key就是子组件名称
2. 其值就是组件对象的属性

效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

父向子传递props

比如我们有一个组件

    Vue.component("introduce",{
        template:`<h2>你好我叫{{name}}</h2>`,
        props:[`name`]
    })

<div id="app">
    <input type="text" v-model="myname"><br>
    <introduce :name="myname"></introduce>
</div>
<script >
    Vue.component("introduce",{
        template:`<h2>你好我叫{{name}}</h2>`,
        props:[`name`]
    })

var vm=new Vue({
    el:"#app",
    data:{
        myname:""
    }
})

</script>

效果图:

父向子-传递复杂数据

<div id="app">
     <list :users="users"></list>
</div>
<script>
    Vue.component("list",{
     template:`<ul>
<ul><li v-for="item in users">
{{item.username}}-{{item.age}}
</li></ul>
               </ul>`,
        props:[`users`]
    })
    var vm=new Vue({
        el:"#app",
        data:{
          users:[{"username":"lucy",age:18},
                 {"username":"张三",age:22},
                 {"username":"梨花",age:89}]
        }
    })
</script>