Vue.js入门教程（九）组件

第九章：组件

有话说在前面

---

组件和双向数据绑定，是vue中最重要的部分。这里你务必要仔细研究，因为很多时候，组件之间的传值，父子兄弟关系将会成为未来困扰你，甚至很多高手的关键所在。

全局声明组件

---

<div id="app">
    <zj1></zj1>
</div>
<script type="text/javascript">
    //创建全局组件
    Vue.component("zj1",{
         template:"<h1>hello world!</h1>"
    })
    //创建根实例 你可以理解为创建一个模型 在vue里面没有控制器一说
    new Vue({
         el:"#app",
    })
</script>

局部声明组件

---

<table id="app2">
    <tr is="zjs"></tr>
</table>
<script type="text/javascript">
    var zj2={
         template:"<tr><td>我是内部元素</td></tr>"
    }
    new Vue({
         el:"#app2",
         components:{
             "zjs":zj2,
         }
    })
</script>

组件相互绑定

---

<bottomlogo v-bind:src="link"></bottomlogo>

通过v-bind 把你需要用的属性，绑定到主要的组件上

Vue.component('bottomlogo', {
     props:['src'], //声明一个 用于接收父级或者同胞传输过来值 的名字
     template: '<div class="ft_log"><img :src="src"></div>',
})

new Vue({
     el:"#public-footer",
     data:{
          "link":"src/images/common/foot_logo.png",
     }
})

组件之间通信/传值

---

注意当你处理复杂的组件关系的时候，建议你使用vuex，如果只是简单的父子关系可以使用这个方法。
props 在接收数据的时候 是可以做验证的。
验证例子：

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

父传子

---

//父级元素 现在我要把父级里面的data中的name传给子级
const title = new Vue({
    el: '#title',
    store,
    components: {layertitle},
    data(){
        return {
            name:"成人学历"
        }
    },
    template: `,
    <header id="title">
        <layertitle :name="name"></layertitle>
        //子级这里接收写法    ":" + 你要发送的属性 引号里面是要发送的值
    </header>
    `
})

export default {
   //名称
   name: "title",
   //他的所属组件
   components: {},
   data(){
     return {
         name:"本组件的自身值"
     }
   },
   methods:{
      myid: function (index){
         return "myid_" +index
      },
      alert:function(index){
         mantis.requestChat();
      }
   },
   props: ["name"],  //先声明你要接收的属性 然后你要注意，你data中得有这个属性才行
};

子传父

---

子级传值父级，是用过$emit操作的，
不过子级不能直接改变父级的值，但是他可以调用父级里面的方法。
通过父级分享给子级的方法，来操作父级。

//父组件 ——————————————》  
const title = new Vue({
    template: `
    <header id="title" :data-name="num">
        <layertitle :name="name" @jia="jianum"></layertitle>
    </header>
    `,
    methods:{
        jianum:function(){
            this.num++;
        }
    }
})

//子组件——————————————————————————————》  子组装件只要绑定一个事件，然后把指定this.$emit去调用父级的方法
<template>
    <ul class="but_ul" :data-name="name">
        <li v-for="(item,index) in count" :id="myid(index)" @click="jss">
            <a href="javascript:;">{{item}}</a>
        </li>
    </ul>
</template>

methods:{
   jss:function(){
       this.$emit('jia'); //这里的jia 对应 父级组件中的@jia
       this.$emit('jia',this.data); // 第一个是方法名，后面的是要传递的变量，父级只需要通过function(val) val就是发送过来的值
   }
}

小贴士：

---

当你的app.js和layer.vue不在一个目录的时候

注意目录路径

是这样的时候，你就需要在调用的目录中修改一下路径了。

//引入组件 titlelayer
import titlelayer from '../com/titlelayer.vue'