第九章：组件
有话说在前面
组件和双向数据绑定，是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'
网友评论