新手入门
<body>
<div id='app'>
<!-- <login title="父组件传值" ></login>
属性绑定
<login :title="title"></login> -->
<!-- <login :title="title" id="mylogin" ></login> -->
<!-- ref使用1 给目标元素加上ref属性 -->
<h3 id="myh3" ref="refh3">我是ref绑定元素</h3>
<button @click="getdom">获取dom</button>
<!--通过ref获取组件 -->
<login :title="title" id="mylogin" ref='mylogin' ></login>
</div>
<!-- 模版 -->
<template id="login">
<div>
登录组件 {{logindata}}
<div class="red">red</div>
<!-- 父组件传递数据：{{title}} -->
<!-- 父组件传递数据2： -->
<!-- {{id}} -->
</div>
</template>
<!-- 注册 -->
<script>
Vue.component("login",{
template:"#login",
data() {
return {
logindata:"login数据"
}
},
methods: {
son(){
console.log("login方法");
this.logindata = "父组件触发"
}
},
created() {
// console.log(this.id);
// 获取组件id
// console.log(this.$attrs);
// console.log(document.getElementById(this.$attrs.id));
},
// 过滤器
filters:{
},
// 自定义指令
directives:{
},
// 接受父组件传值
props:{
// title:String
// title:[String,Number,Object]
title:{
type:[String,Number,Object],
default:"题目"
},
// id:{
// type:String,
// default:"子组件id"
// }
}
})
</script>
<!-- vue实例 -->
<script>
const vm = new Vue({
el: '#app',
data: {
title:"vue实例标题"
},
methods: {
getdom(){
// 原生js获取dom
// console.log(document.getElementById("myh3"));
// document.getElementById("myh3").style.color="red"
// ref获取dom 获取方式this.$refs.ref名
// <!-- ref使用2 获取目标元素 获取方式this.$refs.ref名 -->
// console.log(this);
// console.log(this.$refs.refh3);
// this.$refs.refh3.style.color="blue"
// this.$refs.refh3.style.fontSize="30px"
console.log(this.$refs.mylogin);
console.log(document.getElementById("mylogin"));
// 调用子组件方法
this.$refs.mylogin.son()
}
},
})
</script>
</body>
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
