怎么在vue中调用组件中的方法
下面是源代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
</head>
<body>
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
@click="toggle">
{{ item.name }}
<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
</div>
<ul v-show="isOpen" v-if="isFolder">
<tree-item
class="item1"
v-for="(child, index) in item.children"
:key="index"
:item="child"
></tree-item>
<li class="add" @click="$emit('add-item', item)">+</li>
</ul>
</li>
</script>
<ul id="demo" @click="f">
<tree-item v-for="item in treeData"
ref="from"
class="item2"
:item="item"
></tree-item>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script type="text/javascript">
var treeData = [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
Vue.component('tree-item', {
template: '#item-template',
props: {
item: Object
},
data: function () {
return {
isOpen: false,
}
},
computed: {
isFolder: function () {
return this.item.children &&
this.item.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.isOpen = !this.isOpen
}
},
shou:function(){
console.log('调用了')
},
}})
var demo = new Vue({
el: '#demo',
data: {
treeData:treeData
},
methods:{
f:function(){
this.$refs.from.shou
}
}
})
</script>
</body>
</html>
下面是源代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
</head>
<body>
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
@click="toggle">
{{ item.name }}
<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
</div>
<ul v-show="isOpen" v-if="isFolder">
<tree-item
class="item1"
v-for="(child, index) in item.children"
:key="index"
:item="child"
></tree-item>
<li class="add" @click="$emit('add-item', item)">+</li>
</ul>
</li>
</script>
<ul id="demo" @click="f">
<tree-item v-for="item in treeData"
ref="from"
class="item2"
:item="item"
></tree-item>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script type="text/javascript">
var treeData = [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
Vue.component('tree-item', {
template: '#item-template',
props: {
item: Object
},
data: function () {
return {
isOpen: false,
}
},
computed: {
isFolder: function () {
return this.item.children &&
this.item.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.isOpen = !this.isOpen
}
},
shou:function(){
console.log('调用了')
},
}})
var demo = new Vue({
el: '#demo',
data: {
treeData:treeData
},
methods:{
f:function(){
this.$refs.from.shou
}
}
})
</script>
</body>
</html>
