vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props

我的使用场景：父组件：home.vue

子组件：feed-section.vue

父组件 home.vue 通过请求拿到数据后，传递给子组件 feed-section.vue；因为在子组件中需要渲染 HTML；(当然如果简单些你可以使用 vue 插槽；)

为了让组件完全的可复用；尽量不在父组件干涉子组件内容

实现方法：

父组件中的操作：把数据放在子组件的 :xxxxx 上，这样就传过去了

子附件的操作：props: [

'recommend_feeds'

通过 props 中写一个recommend_feeds 这样就可以拿到父组件通过recommend_feeds穿过来的数据了；

具体写法如下图

home.vue 的

首页组件2

import QuickNav from '@/base/quick-nav/quick-nav.vue'

import FeedSection from '@/base/feed-section/feed-section.vue'

import {getHomeData} from '@/api/home-data.js'

export default {

data () {

return {

recommend_feeds: []

}

components: {

QuickNav,

FeedSection

created () {

this.starGetHomeData()

methods: {

starGetHomeData () {

getHomeData().then((res) => {

console.log(res.recommend_feeds)

this.recommend_feeds = res.recommend_feeds

})

}

feed-section.vue 中的代码

export default {

name: 'feed-section',

props: [

'recommend_feeds'

data () {

return {

myData: []

}

mounted: function () {

methods: {

catchErr (e) {

// const sourcesImg = e.target.getAttribute('src')

// e.target.setAttribute('src', sourcesImg)

console.log(e)

}

vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props相关推荐

vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
js 操作vuex数据_Vue.js中使用Vuex实现组件数据共享案例
当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片一.安装在vue cli3中创建项目时勾选这个组件就可以了或者手动安装 npm install store --sav ...
vuejs 传参向子组件父组件_VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
vue如何把数组转为json数组_vue.js,_vuejs Ajax取得一个数据json数组，vue.js - phpStudy...
vuejs Ajax取得一个数据json数组 vuejs Ajax取得一个数据json数组后,要通取回的数据再做判断一定只能通这种方式或者套template标签 {{item.displayWord ...
vue watch 经常监听不到_Vue.js中 watch(深度监听)的最易懂的解释
FullName: {{fullName}} FirstName: newVue({ el:'#root', data: { firstName:'Dawei', lastName:'Lou', fu ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
vue里面怎么实现页面跳转_vue.js怎样做跳转页面？
vue.js怎样做跳转页面?下面本篇文章给大家介绍一下vue.js跳转页面.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 我们知道在vue里进行页面跳转的话,我们使用这个标签组件 ...
vue 怎么在html显示为回车_vue.js中怎么换行？
vue.js中怎么换行?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在页面中经常会遇到自定义文本,如果文本过长就需要换行,在HTML中可以通过标签换 ...

vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props

vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props相关推荐

最新文章

热门文章