前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站点击跳转浏览。
一般的话,如果要调用子组件中的方法,一般用watch一个父组件传递给子组件的一个值这样来进行观测,一般不会用下面这两种方式不过不得已,也要用
方案一:通过ref直接调用子组件的方法;
//父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.sing(); }, }, } </script> //子组件中 <template> <div>我是子组件</div> </template> <script> export default { methods: { sing() { console.log('我是子组件的方法'); }, }, }; </script>
方案二:通过组件的 $e m i t 、 emit、emit、on方法;
//父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.$emit("childmethod") //子组件$on中的名字 }, }, } </script> //子组件中 <template> <div>我是子组件</div> </template> <script> export default { mounted() { this.$nextTick(function() { this.$on('childmethods', function() { console.log('我是子组件方法'); }); }); }, }; </script>
结语
🔥一个人可以掌握知识,但只有与他人交流才能形成智慧。
🔥One person can acquire knowledge, but wisdom is formed only in the exchange with others.
🏆 我坚信人与人之间的差距是表面上是财富的差距,本质上是大脑中认知的差距,
我们下期再见。