💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
1. **父组件通过属性名向子组件传data** 父组件通过给子组件设置属性名获取data,子组件注册属性名获取data ``` <div id="app"> <!-- 通过属性传参 --> <like :param="count"></like> </div> <template id="test_template"> <!-- 在模板中用差值表达式引用数据 --> <button @click="add">{{num}}</button> </template> <script> Vue.component('like',{ template: '#test_template', /* 注册属性值传参 */ // props:['param'] props: { param: Number }, /* 组件中 */ data() { return { num: this.param } }, methods: { add(){ this.num++ } } }) new Vue({ el: '#app', data: { count: 0 } }) </script> ``` 2. **父组件通过设置事件向子组件传递方法** 父组件向子组件传递方法,使用的是事件绑定机制:v-on或者@ 当我们自定义了一个事件属性之后,那么,子组件就能够通过某些方式来调用 ``` //1. 父元素定义需要传递的方法 methods: { loadComments(){ var list = JSON.parse(localStorage.getItem('cmts') || '[]'); this.list = list; } } ``` ``` //2. 通过属性名向子元素传递方法 <cmt-box @func="loadComments"></cmt-box> ``` ``` //3. 子元素触发该方法 //当执行这段代码时会触发组件的func方法,即父元素传入的方法 this.$emit('func'); ``` >[success] 1332432