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
- 0. MVC和MVVM
- 1. v-model无法实时更新的解决办法
- 1. Vue 指令
- 1. v-cloak&v-text&v-html
- 2. v-bind
- 3. v-model
- 7. v-for指令的几种使用方式
- 8. v-if和v-show的使用
- 2. 事件修饰符
- 3. 通过属性设置样式
- 1. 通过属性绑定设置元素class
- 2. 通过属性绑定设置元素style
- 4. 自定义指令
- 11. 自定义全局指令
- 12. 自定义私有指令
- 5. 过滤器
- 6. 键盘指令
- 7. 生命周期
- 8. vue-resource
- 9. 动画
- 1. 使用过渡类名实现动画
- 2. 使用animate.css实现动画
- 3. 钩子函数实现小球半场动画
- 10. 组件
- 1. 全局组件的创建方式
- 2. 私有组件的创建方式
- 3. 组件中的data和methods
- 4. component元素
- 5. 组件配合transition元素实现动画
- 6. 父组件传参传方法
- 11. 路由
- 1. 什么是路由
- 2. vue-router的使用
- 3. 使用router-link&query方式传递参数
- 4. 使用param传值
- 5. 使用children属性实现路由嵌套
- 6. router-view之间获取父级data
- 7. 实现路由跳转的几种方式
- 12. 设置缓存
- 13. $ref 操作DOM&获取自定义属性
- 14. 初始化一个项目
- 15. 使用并封装一个axios方法
- 17. vuex
- 18. watch 监听 data数据
- 19. keep alive 缓存路由组件
- vue效果实现
- 1. 实现顶部根据滑动渐隐渐现
- 2. 制作一个动画包裹组件
- 20. vue 中的数据类操作
- 第三方工具&ui
- 1. vant-ui
- 1. 上拉加载更多
- 2. 使用图片预加载
- 2. better-scroll
- 1. 实现上下滑动效果
- 2. 实现两栏式点击滑动跳转
- vue3
- compositionApi
- 2. ref 和 reactive
- 4. watch
- 5. watchEffect
- 7.使用ref操作dom
- effect副作用
- 1. 新特性
- 3. 生命周期
- 6.定义props
- 实现自定义组件v-model
- vue面试题
- 1.对mvvm的理解
- 2.vue2和vue3响应式数据的理解
- 3.vue中如何检测数组的变化
- 4.vue中如何进行依赖收集
- 5.如何理解vue中的模板编译原理
- 6.vue生命周期以及原理
- 7.vue组件data为什么必须是个函数
- 8.vue-router原理
- 9.vue.mixin原理
- 10.$nextTick原理
- 11.computed和watch的区别
- vue SSR服务端渲染
- 1.什么是服务端渲染
- 2.快速创建服务端渲染