1 is="lili"
2 message傳值
3 todo:父子屬性傳值
<!DOCTYPE html> <html> <title>vue中的條件渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body><div id="app" > <ul> <li is="lili"></li> </ul> </div> <script> Vue.component("lili",{ data:function(){ return { message:"message" } }, template:'<li>{{message}}</li>' }) var vm = new Vue({ el:"#app", data:{ message:"hello world" } }) </script> </body> </html>
ref 操作dom
<!DOCTYPE html> <html> <title>vue中的條件渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body><div id="root" > <li is="counter" ref="one" @change="handleChange"></li> <li is="counter" ref="two" @change="handleChange"></li> <div>{{total}}</div> </div> <script> Vue.component("counter",{ data:function(){ return { number:0 } }, methods:{ handleClick:function(){ this.number ++, this.$emit('change') } }, template:'<div @click="handleClick">{{number}}</div>' }) var vm = new Vue({ el:"#root", data:{ total:0 }, methods:{ handleChange:function(){ this.total = this.$refs.one.number + this.$refs.two.number } } }) </script> </body> </html>