使用组件要注意的细节点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用组件要注意的细节点相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<table>
<tbody>
<!-- <tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr> -->
<!-- //虽然会显示出来，但有问题 <br> -->
<row></row>
<row></row>
<row></row>
<!-- //可行 <br> -->
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
<!-- //可行 <br> -->
<ul>
<li is="list"></li>
<li is="list"></li>
<li is="list"></li>
</ul>
</tbody>
</table>
</div>
<script type="text/javascript">
Vue.component("row",
template: "<tr><td>1</td></tr>"
);
Vue.component("list",
template: "<li>1</li>"
);
var vm = new Vue(
el: "#root"
);
</script>
</body>
</html>
在子组件里定义data必须是函数，不能是对象（为了让子组件之间不共享数据，通过函数返回让每个子组件都有独立的数据存储）：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
Vue.component("row",
/*//然而，在子组件，而不是根组件new Vue()中通过对象定义data是不可以的，而必须是函数
data:
content: "this is a row"
,*/
//这才是正确的：
data: function()
return
content: "this is content"
,
template: "<tr><td>content</td></tr>"
);
Vue.component("list",
template: "<li>1</li>"
);
var vm = new Vue(
el: "#root"
);
</script>
</body>
</html>vue不建议操作dom，但在处理一些复杂的动画效果，光靠vue的数据绑定并不一定能满足情况。vue中通过ref操作dom：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<div ref="hello" @click="handleClick">hello world</div>
</div>
<script type="text/javascript">
var vm = new Vue(
el: "#root",
methods:
handleClick: function()
//获取指定dom节点
console.log(this.$refs.hello.innerHTML)
);
</script>
</body>
</html>如果是获取组件的dom呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>total</div>
</div>
<script type="text/javascript">
Vue.component("counter",
template: "<div @click=‘handleClick‘>number</div>",
data: function()
return
number: 0
,
methods:
handleClick: function()
this.number++
this.$emit("change")
)
var vm = new Vue(
el: "#root",
data:
total: 0
,
methods:
handleChange: function()
/*console.log(this.$refs.one.number)
console.log(this.$refs.two.number)*/
this.total = this.$refs.one.number + this.$refs.two.number
);
</script>
</body>
</html>
以上是关于使用组件要注意的细节点的主要内容，如果未能解决你的问题，请参考以下文章