aaa

Posted 2020-10-08 iwideal

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了aaa相关的知识，希望对你有一定的参考价值。

//创建属于自己的vue组件库
(function(Vue, undefined) {
    Vue.component("my-component", {
        template: ‘<div @click="alertName">{{message.name}}<button @click="alertMessage">{{message.age}}</button></div>‘,//模板最外层必须只有一个标签包裹，不能同时存在两个
        props: [‘message‘],
        data: function() {
            return {
                
            }
        },
        methods: {
            alertName() {
                this.$emit(‘alerta‘)//事件名称必须小写，不然无效(此处浪费了我好长时间)
            },
            alertMessage(){
            	this.$emit(‘alertmessage‘,this.message.name)
            }
        }
    })
}(Vue))

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="iview.js"></script>
</head>
<body>
	<div id="example">
		<my-component :message="great" @alerta="alet" @alertmessage=‘alertb‘></my-component>
	</div>

	<script type="text/javascript">
		var vue=new Vue({
				el: ‘#example‘,
				data:{
					great:{
						name:‘wanglu‘,
						age:12
					}
				},
				methods:{
					alet(){
						this.great={name:‘liuyu‘,age:13};
					},
					alertb(name){
						alert(name);
					}
				}
			})
	</script>

</body>
</html>

以上是关于aaa的主要内容，如果未能解决你的问题，请参考以下文章