Vue 组件
#组件：有html模板，有css样式，有js逻辑的集合体
#根组件的模板就使用挂截点，子组件必须自己定义template(局部子组件、全局子组件)
局部组件
<div id="app">
<!--div.box>h1{标题}+(p.p${文本内容}*2)-->
<abc></abc>
<abc></abc>
</div>
<script src="js/vue.js"></script>
<script>
// 定义局部组件
let localTag = {
// 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
// 2.data的值就是一个存放数据的字典
// 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
data: function () {
return {
count: 0,
// r: ''
}
},
template: `
<div class="box" style="border: solid; width: 100px">
<h1>标题</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
<button @click="send"></button>
</div>
`,
methods: {
action: function () {
this.count++
},
// 结合JQ完成组件与后台的交互
// send: function () {
// $.ajax({
// url:,
// type:,
// data:，
// success: function (result) {
// this.r = result
// }
// })
// },
// watch: {
// r: function () {
//
// }
// }
}
};
new Vue({
el: '#app',
data: {
},
// 局部组件必须注册
components: {
'abc': localTag
}
})
</script>
全局组件
<div id="app">
<!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
<old-boy></old-boy>
</div>
<script src="js/vue.js"></script>
<script>
// Vue.component(组件名, {组件主体});
Vue.component('oldBoy', {
data: function () {
return {
count: 0
}
},
template: `
<div class="box" style="border: solid; width: 100px">
<h1>全局</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods: {
action: function () {
this.count++
},
}
});
// 全局组件无需注册
new Vue({
el: '#app',
data: {
}
})
</script>
组件间的交互：父传子
<div id="app">
<!-- local-tag就可以理解为自定义标签，使用msg变量值由父组件提供 -->
<!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
<!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
<local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
// 子组件拿自定义属性
props: ['owen'],
template: `
<div>
<h1>信息</h1>
<p>{{ owen }}</p>
</div>
`
};
new Vue({
el: '#app',
data: {
msg: '父级的信息'
},
components: {
// 'localTag': localTag,
// localTag: localTag,
localTag // 在页面中 <local-tag>
}
})
</script>
组件间的交互：子传父
<div id="app">
<h1>{{ title }}</h1>
<global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag', {
template: `
<div>
<input type="text" v-model="msg">
<!--<button @click="action">修改标题</button>-->
</div>
`,
data: function () {
return {
msg: ''
}
},
methods: {
// action: function () {
// let msg = this.msg;
// // recv是自定义的事件
// this.$emit('recv', msg)
// }
},
watch: {
msg: function () { // 只要msg只有变化，就将值同步给父组件
this.$emit('recv', this.msg)
}
}
});
new Vue({
el: '#app',
data: {
title: '父组件定义的标题'
},
methods: {
get_title: function (msg) {
this.title = msg
}
}
})
</script>
