하위 구성 요소가 Vue에서 상위 구성 요소 데이터를 수정하도록 하는 방법-JS 튜토리얼-php.cn

ㅋㅋㅋ • 1. 일반적인 사용 시나리오

... watch:{ value(val) { console.log(val); this.visible = val; } } ...

로그인 후 복사

관련 학습 권장 사항:javascript 비디오 튜토리얼

•2 처음부터 실행하려는 경우

... watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName; }, immediate: true, } } ...

로그인 후 복사

•3. )

... watch: { obj: { handler(newName, oldName) { console.log('///') }, immediate: true, deep: true, } ...

로그인 후 복사

2. 하위 구성 요소가 상위 구성 요소 속성을 수정하는 방법 이해

vue2.0+ 이후에는 더 이상 양방향 바인딩을 수행하려면 특별한 처리가 필요합니다. .

[Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰므로 prop을 직접 변경하지 마세요. 대신 변경되는 prop의 값을 기반으로 데이터 또는 계산된 속성을 사용하세요. "

•1. 상위 구성 요소에 이벤트를 보내 수정

**在子组件test1中**   {{item}}
 ... methods: { add() { // 直接把数据发送给父组件 this.$emit('update', this.book); this.book = ''; }, }, **在父组件中**  ... addBook(val) { this.books = new Array(val) },

로그인 후 복사

•2. .sync를 사용하여 하위 구성 요소가 상위 구성 요소의 값을 수정하도록 합니다(실제로 위 방법의 간소화된 버전).

**在父组件中,直接在需要传递的属性后面加上.sync**  **在子组件中**

로그인 후 복사

• 3. 하위 구성 요소에서 복사본을 복사합니다.

**子组件中** export default { props: { // 已经选中的 checkModalGroup: { type: Array, default: [], required: false, } }, data() { return{ copyCheckModalGroup: this.checkModalGroup, // 选中的 } }, methods: { // 一个一个的选择 checkAllGroupChange(data) { // 把当前的发送给父组件 this.$emit('updata', data); }, }, watch: { checkModalGroup(newVal, oldVal) { this.copyCheckModalGroup = newVal; } } } **父组件中直接更新传递给子组件的数据就可以** ... // 更新子组件数据 roleCheckUpdata(data) { this.roleGroup = data; }, ...

로그인 후 복사