vue2之组件及其他对应的事件

最新推荐文章于 2024-08-11 07:56:18 发布

默默努力的小老弟

最新推荐文章于 2024-08-11 07:56:18 发布

阅读量620

点赞数

文章标签：前端 vue.js html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121499968

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <div id="app">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item title="tttt1" age="aaa" @click="aaa"></todo-item>
    <!-- @boxClick是监听子组件的这个emit事件 -->
    <test ref="mybtn"></test>
  </ol>
</div>
<template id="todo">
     <h2>hello</h2>

</template>


</body>
<script src="js/vue.js"></script>
	<script type="text/javascript">
	 
Vue.component('todo-item', {
     template:"#todo",
     methods:{
        aaa(){
            console.log("9999")
        },
     }


})

var app7 = new Vue({
  el: '#app',
  data: {
   	aabx:'zxxx'
  },
  components:{
  	test:{
  		template:"<h2 @click='mytest'>xxxxxxx</h2>"
  		,methods:{
  			mytest(item1,obj){
          console.log(obj);
  				console.log("收到子组件的信息");
  				console.log(this.$refs);

  			}

  		}
  	}

  }
})


console.log("获取这个节点"+app7.$el);//获取这个节点
console.log("用于生命周期的初始化时调用后面的数据"+app7.$options.data);//用于生命周期的初始化时调用后面的数据
console.log(app7.$children);//



	</script>
</html>