我正在尝试在组件中使用on click指令,但它似乎不起作用.当我点击组件时,当我在控制台中获得"测试点击"时,会发生无关紧要的事情.我没有在控制台中看到任何错误,所以我不知道我做错了什么.
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuetest</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
App.vue
<template>
<div id="app">
<test v-on:click="testFunction"></test>
</div>
</template>
<script>
import Test from './components/Test'
export default {
name: 'app',
methods: {
testFunction: function (event) {
console.log('test clicked')
}
},
components: {
Test
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
Test.vue(组件)
<template>
<div>
click here
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: 'Welcome to Your …Run Code Online (Sandbox Code Playgroud) 有没有办法从子组件到父组件获取计算数据?因为我首先将数据从父级发送到子级,然后我想在父组件中使用计算属性(数据)。我想这样做是因为我也想在其他组件中重用那个重要的组件(子组件)。
我有一个用于过滤我的项目的搜索输入字段,当我写下一些东西时,我想从子组件中取回该列表。
父组件
<input class="form-control form-control-search m-input" autocomplete="off" type="text" v-on:input='testFunc()' v-model="search" placeholder="Search...">
<paginate-links v-if="items.length > 0" :models="items">
<div class="m-list-timeline__item no-timeline" v-for="item in filterItems" v-bind:key="item.id">
{{ item.title }}
</div>
</paginate-links>
Run Code Online (Sandbox Code Playgroud)
子组件
props: ['item']
computed: {
filterItems () {
return filter // here goes my code
}
}
Run Code Online (Sandbox Code Playgroud)
那么我可以filterItems在父组件中获取吗?