Vue学习：使用组件的细节点

mac2025-06-25 2

Vue学习：使用组件的细节点

一、is解决html5解析错误问题

1.1 在HTML创建table

<table> <tbody> <tr><td>this is derrick</td></tr> <tr><td>this is derrick</td></tr> <tr><td>this is derrick</td></tr> </tbody> </table>

1.2 使用子组件代替tr

出错，tr没有包裹在tbody里面，html5中规定我们table里面放tbody，tbody里面放tr，但是我们将tr改成了row，所以解析会出现问题

<body> <div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </div> </body> <script> Vue.component('row',{ template:'<tr><td>this is derrick</td></tr>' }) var vm = new Vue({ el:"#app", }) </script>

1.3 利用is属性解决问题

tbody里面只能写tr，我们就写tr，但实际上我们是要用row代替，利用is属性即可

<body> <div id="app"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> </body> <script> Vue.component('row',{ template:'<tr><td>this is derrick</td></tr>' }) var vm = new Vue({ el:"#app", }) </script>

二、data使用函数

2.1 将显示的内容放入data

报错，The “data” option should be a function that returns a per-instance value in component definitions，说明组件里面的data不能像vue实例一样直接写，要使用方法function的形式返回

2.2 修改data

三、ref操作DOM

ref为DOM起一个引用的名字，$ refs代表整个vue中所有的引用，$refs.后面跟的就是你需要操作的引用，这样便可以操作DOM

<body> <div id="app"> <div ref='hello' @click="handleClick">hello derrick</div> </div> </body> <script> var vm = new Vue({ el:"#app", methods:{ handleClick:function(){ //指向div alert(this.$refs.hello.innerText) } } }) </script>

最新回复(0)