个人中心
gpt4 book ai didi

javascript - Vue 事件 - 无法从子组件收听 $emit 事件

转载 作者：行者123 更新时间：2023-11-30 19:48:21 27 4
gpt4 key购买 nike

我遇到了一个简单的问题，就是无法弄清楚为什么它不起作用。我有一个子组件“app-buttons”，其中我有一个输入字段，我想听，所以我可以根据输入值过滤列表。

如果我将输入放在我有列表的根组件中，一切正常。但我想将其拆分，并将搜索输入值 $emit 给父 en 然后使用它。

// THIS IS THE COMPONENT WHERE I WAN'T TO LISTEN TO THE SEARCH INPUT

import Buttons from './app-buttons.js';
import Event from './vue-event.js';

export default Vue.component('post-item', {

	template: `
		<section class="posts flex" v-if="posts">
			<app-buttons :posts="posts"></app-buttons>

			<transition-group name="posts" tag="section" class="posts flex">
				<article class="postitem" :class="{ 'danger': !post.published }" v-for="post in posts" :key="post.id">
					<p v-if="post.published">Post is published</p>
					<p v-else>Post is <em><strong>not</strong></em> published</p>
					<h4>{{ post.title }}</h4>

					<button type="submit" @click="post.published = !post.published">Change status</button>
				</article>
			</transition-group>
		</section>
	`,

	data() {
		return {
		};
	},

	components: {
		Buttons,
	},

	props: {
		posts: Array,
		filterdList: [],
	},

	created() {
		console.log('%c Post items', 'font-weight: bold;color:blue;', 'created');
	},

	computed: {
		//filteredList() {
		//	return this.posts.filter(post => {
		//		return post.title.toLowerCase().includes(this.search.toLowerCase());
		//	});
		//},
	},

	methods: {
		update() {
			console.log('test');
		}
	}
});





// THIS IS THE COMPONENT IM TRIGGERING THE $EVENT FROM

import Event from './vue-event.js';

export default Vue.component('app-buttons', {
	template: `
		<div class="postswrapper flex flex--center flex--column">

			<section :class="className" class="flex flex--center">
				<button type="button" @click="showUnpublished">Unpublish</button>
				<button type="button" @click="shufflePosts">Shuffle</button>
			</section>

			<section :class="className">
				<input type="text" v-model="search" v-on:input="updateValue" placeholder="Search..." />
			</section>

		</div>
	`,

	data() {
		return {
			className: 'buttons',
			search: '',
		}
	},

	props: {
		posts: Array,
	},

	created() {
		//console.log(this);
		console.log('%c Buttons', 'font-weight: bold;color:blue;', 'created');
	},

	methods: {
		updateValue() {
			//console.log(this.search);
			this.$emit('searchquery', this.search);
		},

		showUnpublished() {
			this.posts.forEach(item => {
				item.published = true;
			})
		},
 
		shufflePosts() {
			this.$emit('postshuffled', 'Fisher-Yates to the rescue');
			for (var i = this.posts.length - 1; i >= 0; i--) {
				let random = Math.floor(Math.random() * i);
				let temp = this.posts[i];
				
				Vue.set(this.posts, i, this.posts[random]);
				Vue.set(this.posts, random, temp);
			}
		},
	}
});
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue JS</title>
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div id="app">
		<app-header :logo="logo" :name="name"></app-header>
		<post-item :posts="posts" v-on:searchquery="update" v-on:sq="update" v-on:postshuffled="update"></post-item>
	</div>

	<script type="module">
		import AppHeader from './components/app-header.js';
		import PostItem from './components/post-item.js';

		const app = new Vue({
			el: '#app',
			data: {
				name: 'Vue App',
				logo: {
					class: 'vue-logo',
					src: 'https://vuejs.org/images/logo.png',
				},
				components: {
					AppHeader,
					PostItem,
				},
				posts: [
					{id: 1, title: 'Test', published: true},
					{id: 2, title: 'New post', published: true},
					{id: 3, title: 'Added', published: true},
					{id: 4, title: 'Another post', published: true},
					{id: 5, title: 'In the future', published: false},
					{id: 6, title: 'Last post', published: true},
				],
			},

			created() {
				console.log('Created');
			},

			mounted() {
				console.log('Mounted');
			},

			methods: {
				update() {
					console.log('updated');
				}
			},
		});
	</script>

</body>
</html>

最佳答案

你说:

I have a child component "app-buttons", where i have an input field, i want to listen to, so i can filter a list based on the input value.

你有:

<div id="app">
    <app-header :logo="logo" :name="name"></app-header>
    <post-item :posts="posts" v-on:searchquery="update" v-on:sq="update" v-on:postshuffled="update"></post-item>
</div>

这表示您希望 post-item 发出一个 searchquery 事件。它不是。

在 post-item 中，您有:

    <app-buttons :posts="posts"></app-buttons>

因此，您希望 app-buttons 发出一个事件，而 post-item 隐式地将其冒泡，但 Vue 事件不会冒泡。如果您想要这种行为，您需要让 post-item 处理事件:

    <app-buttons :posts="posts" v-on:searchquery="$emit('searchquery', $event)"></app-buttons>

关于javascript - Vue 事件 - 无法从子组件收听 $emit 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54733605/

27 4 0
文章推荐： javascript - 在 Angular 项目中包含 antlr4 的问题
文章推荐： Javascript 无法从使用此调用的方法设置属性
文章推荐： javascript - 如何使用angular中的ng2-file-upload上传.ply文件
文章推荐： javascript - 如何抓取网页的javascript部分？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com