샐님은 개발중

router.js 에서 컴포넌트를 import 시키는 방법 import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' //1.바로 import 시킴 const About =() =>{ return import(/* webpackChunkName: "about" */ './views/About.vue') //3. } Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', // 주소 name: 'home', component: Home //컴포넌트 }, { path..

store.js mutations: { addUsers:(state,payload)=>{ //payload 가져온 값을 넘겨주는 역할 state.allUsers.push(payload) } }, actions: { /*addUsers: context =>{ context.commit('addUsers') //mutation 실행 }*/ addUsers: ({commit},payload) =>{ //context,payload //{commit},payload -> context를간단하게 써줌 commit('addUsers') } } signup.vue methods: { ...mapMutations(['addUsers']) signUp() { let userObj = { userId: this.userI..

MUTATIONS : state 값을 변화 시킴. 변이 store.js mutations: { addUsers:(state,payload)=>{ //payload 가져온 값을 넘겨주는 역할 state.allUsers.push(payload) } signup.vue 1.mapMutations 를 import 시켜서 씀. signup.vue 2. $store.commit(함수 이름,인자)로 바로 호출 가능하다. this.$store.commit('addUsers',userObj)

user.vue 의 data에 있는 배열을 store.js 의 state에 옮겨준다.

*1번째 방법 : 자식 -> 부모 -> 자식 1. UserEdit.vue - 전달하려는 컴포넌트 2. User.vue - 부모 컴포넌트 (자식이 보낸 데이터 받기) . . . * 2번째 방법: eventBus 이용 1. main.js - eventBus 추가, 형제 컴포넌트 간의 데이터 전달시 필요. import '@babel/polyfill' import Vue from 'vue' import './plugins/vuetify' import App from './App.vue' Vue.config.productionTip = false export const eventBus = new Vue() // 이벤트 버스라는 상수를 내보내는데 이것은 새로운 뷰 인스턴스를 생성해 내보내고 있음. new Vue({..

1. User.vue -부모 컴포넌트 :name="name" :address="address" :phone="phone" :hasDog="hasDog"

1.userDetail.vue -자식 컴포넌트 More user Info User Name {{ChildrenofUser.name}} {{ChildrenofUser.familyName}} {{sayHello}} SwitchName switchName()메소드를 호출하면 자식컴포넌트의 데이터는 변경되지만, 부모 컴포넌트의 데이터는 변경되지 않는 다는 문제점이 있다. 부모 컴포넌트의 데이터도 변경하려면 어떻게 해야할까? -> 다음포스트에서

* props 로 데이터 전달 시 숫자, 객체, 문자열등 다양한 형태로 전달 가능 1. User.vue -부모 컨포넌트(객체 데이터 전달) User Info User Name is {{name}} Name Change 2. UserDetail.vue - 자식 컴포넌트(객체 데이터 받아서 화면에 뿌림) More user Info User Name {{ChildrenofUser.name}} {{ChildrenofUser.familyName}}

*부모(user.vue)에서 자식(userDetail.vue)로 데이터 전달하기. 1. App.vue 2. User.vue - 부모 컨포넌트 User Info User Name is {{name}} Name Change 3. UserDetail.vue -자식 컨포넌트 More user Info User Name {{ChildrenofUser}}

1. App.vue Plese select board Type X style