1、新建一个js文件，创建子组件，例：test-component.js
Vue.component('test-component', { template: ` <div v-if="isshow">{{userno}} - {{username}}</div> `, props: ['isshow'], // html接收字段名都是小写，单向传递 data() { return { username: '', // 组件内部属性 userno: '', } }, watch: { // 传值发生改变触发事件 isshow: { handler(newVal, oldVal) { console.log('isshow旧值:' + oldVal); console.log('isshow新值:' + newVal); // 根据值的改变，写相应逻辑代码 this.getInfo(); } }, }, methods: { // 组件内方法 getInfo(){ } } })
2、新建html文件，创建父组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入VUE文件 --> <script src="./js/vue.js"></script> <!-- 引入子组件js文件 --> <script src="./js/test-component.js"></script> </head> <body> <div id="app"> <test-component :isshow="isshow"></test-component> </div> </body> <script> var app = new Vue({ el: '#app', data() { return { isshow:ture } } }); </script> </html>
