<template id="cpn1"> <div>子组件1</div> </template> <template id="cpn2"> <div>子组件2</div> </template> <script> Vue.component('cpn1',{ template:'#cpn1', data(){ return{ message:'cpn111' } } }); Vue.component('cpn2',{ template:'#cpn2', data(){ return{ message:'cpn222' } }, methods:{ show(){ console.log("我是子组件的方法"); } } });
const app = new Vue({ el:'#app', data:{ message:'hello world' }, methods:{ btnClick(){ console.log(this.$children);//返回子组件类型的数组 console.log("访问子组件的属性：",this.$children[0].message);//cpn111
console.log("通过refs访问子组件的属性：",this.$refs.aaa.message);//cpn222 this.$refs.aaa.show();//我是子组件的方法 } } }) </script> </body>
</html>