Vue的ref

1、html 部分

 <div id="app"> <div class="component_box"> <h1>问卷调查 <template id="MyVoteTemplate"> <div> <h3> <span v-text="title">{num}} <template id="VoteButton"> <div class="btn_box" v-show="flag"> <button @click="handle('no')">是 template: '#VoteButton', data() { return { flag: true } }, methods: { handle(i) { this.$parent.num++; } } }; // 父组件 const MyVote = { template: '#MyVoteTemplate', props: { title: { type: [String, Number], // 设置默认值 default: '这是标题' } }, components: { VoteButton }, data() { return { num: 0 } }, methods: { changeParent() { // console.log(this.$children); // this.$children[0].flag = !this.$children[0].flag; this.$refs.buttons.flag = !this.$refs.buttons.flag; } } }; // 页面 new Vue({ el: "#app", components: { MyVote }, data: { voteList: [ { id: 1, title: "**是否很漂亮！" }, { id: 2, title: "***是否很帅！" } ] } }); 

3、css 部分

.component_box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } .commponents { border-bottom: 1px solid #666666; padding: 20px 0; box-sizing: border-box; } .btn_box>button:first-child { color: blue; } .btn_box>button:last-child { margin-left: 16px; }