@Author：Runsen
@Data：2020/10/16
备战前端、大四加油。下面是总结来源慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发课程使用组件的三个细节点。
is的使用
直接使用组件可能会有bug，因为h5里面可能会有固定格式
出现需求：H5标签元素中如何正确使用子组件，比如<table><tbody><tr><td></td></tr></tbody></table>
下面是通过Vue实现的H5标签元素，但是出现了tr和td不在<table><tbody>里面。
<body>
<div id="app">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component("row",{
// 子组件中的data必须是function函数
data() {
return {
content:"this is a content"
}
},
template:"<tr><td>{
{content}}</td></tr>"
})
var vm = new Vue({
el:"#app",
})
</script>
</body>
通过子组件row去解析<tr><td> </td></tr>这部分，则会出现问题
对于上面的bug，需要使用is，既保证tr使用了row这个子组件，又符合H5的编码规范，具体解决代码如下。
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component("row",{
// 子组件中的data必须是function函数
data() {
return {
content:"this is a content"
}
},
template:"<tr><td>{
{content}}</td></tr>"
})
var vm = new Vue({
el:"#app",
})
</script>
</body>
类似还有:<ul><ol><li></li></ol></ul>、<section><option></option></section>
组件中的data必须是方法
在子组件定义data时传递内容必须是方法，值必须为一个函数（函数返回一个对象，对象要包含你所对应的数据），其中有两种写法，
<div id="app">
<counter></counter>
<counter></counter>
</div>
<script>
Vue.component("counter",{
// data() {
// return {
// number : 0 （这里是：）
// }
// },
data:function(){
return{
number : 0 //（这里是：）
}
},
template:"<div @click='HandleDivClick'>{
{number}}</div>",
methods: {
HandleDivClick:function(){
this.number ++
}
},
})
var vm = new Vue({
el: "#app",
})
</script>
</body>
ref 引用
Vue中如何操作dom
出现需求：ref引用获取dom节点和dom内容 ？
解决方法：一般是如this.$refs.xxx获取dom节点，来进行dom操作，如下面代码
<body>
<div id="app">
<!-- 一般来说你要在vue里操作DOM，要先在标签里加上ref=""，如下： -->
<div ref="Hello" @click="HandleDivClick">Hello world</div>
</div>
<script>
// vue中如何操作dom
var vm = new Vue({
el: "#app",
methods: {
HandleDivClick:function(){
// 打印出<div>Hello world</div>
console.log(this.$refs.Hello)
console.log(this.$refs.Hello.innerHTML)
}
}
})
</script>
</body>
实现计算器中的功能
出现需求：制作一个计数器,并且能够点击数字就按顺序+1。
<body>
<!-- 实现计算器中的功能 -->
<div id="app">
<counter></counter>
<counter></counter>
</div>
<script>
Vue.component("counter",{
// data() {
// return {
// number : 0
// }
// },
data:function(){
return{
number = 0
}
},
template:"<div @click='HandleDivClick'>{
{number}}</div>",
methods: {
HandleDivClick:function(){
this.number ++
}
},
})
var vm = new Vue({
el: "#app",
})
</script>
</body>
上面的代码只是有两个counter组件，每次点击就加一，下面添加对两个进行求和，相当于实现一个发布订阅的功能
子组件向父组件发送数据：向外界触发事件（这里用this.$emit="change"）用于告知，即在子组件定义methods使用$emit
父组件中counter组件：用于监听该触发事件，即绑定一个事件监听方法（这里@change="xxx"）
Vue实例定义methods，使用这个绑定后的方法
1、出现需求：这样一想，只需在change方法里做一个求和功能就可以实现求和
2、解决方法：使用ref引用形式
在子组件中分别在两个子组件下使用ref，在Vue实例中handleChange里计算两个子组件（this.$refs.one.number 和 this.$refs.two.number）的和，具体实现的代码如下。
<body>
<div id="app">
<counter @change="HandlerChange" ref="one"></counter>
<counter @change="HandlerChange" ref="two"></counter>
<div>{
{total}}</div>
</div>
<script>
Vue.component("counter",{
data() {
return {
number:0
}
},
template: "<div @click='HandlerDivClick'>{
{number}}</div>",
methods: {
HandlerDivClick:function(){
this.number ++
// 当子组件发生改变，那么就通过$emit向父组件传值
this.$emit("change")
}
},
})
var vm = new Vue({
el : "#app",
data:{
total: 0
},
methods:{
HandlerChange:function(){
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>
</body>
参考资料：
- 慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
- https://mp.weixin.qq.com/s/F1B32HPfaIsTtjubM8rlWw
后言
每天跑步成了必须，也成了一种习惯。
我很好，但是还差点运气
但努力的人运气都不会太差嘛
偶尔我可能还是会有负能量爆炸的时候
我还是想不通很多事情
但不会再为了屁大点事颠三倒四
不再去预测未来，我的任务就是让自己变得更好更棒
去迎接一轮又一轮新的面试
转载：https://blog.csdn.net/weixin_44510615/article/details/109125729