怎么传递一个html的dom的id到vue组件中？

Question

怎么传递一个html的dom的id到vue组件中？

html

<div id="99"></div>
<demo></demo>

Demo.vue

data() {
    return {
        //...
    }
},
methods: {
      submit() {
        // ...
      }
}

问题：
我要把html中div的id值传入到<demo></demo>中，submit方法中要用到，怎么做呢？

更新：
我是在laravel中使用vue组件，需要获取的这个artileId是后台php渲染在html中的，要把这个artileId传入到vue组件中，怎么获取这个artileId？用js或jqeury么？
article.blade.php

<div id="articleTitle" data-id="99">文章标题</div>

<div id="app">
    <demo :article-id="articleId"></demo>
</div>

<script>
    var articleTitleElement = document.getElementById("articleTitle");
    var artileId = articleTitleElement.getAttribute("data-id");
    console.log(artileId);//可以正常打印
</script>

Demo.vue

data() {
    return {
        //...
    }
},
methods: {
      submit() {
        // ...
      }
}

laravel的\resources\assets\js\app.js文件：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));
Vue.component('demo', require('./components/Demo.vue'));


const app = new Vue({
    el: '#app'
});

Answer 1

html:

<div id="99"></div>
<!-- <demo id="99"></demo> -->
<!-- id属性比较特殊，现修改为div-id -->
<demo div-id="99"></demo>

Demo.vue

// 通过props属性传入id
// props: ["id"],
props: ["divId"],
data() {
    return {
        //...
    }
},
methods: {
      submit() {
        // this.divId即所需的id
        var id = this.divId;
        // ...
      }
}

Update1:
一开始没注意id是特殊属性，现修改上述代码，把id换成一个一般的名字。
html中的名字使用-连接的写法，在js中是驼峰式写法。

Update2:
没有找到要找的信息，用Vue一般会有一个new Vue，还有你的这个PHP文件应该会有一个script的src指向包含new Vue的文件，如下图我截取的一个例子，我想知道你这个new Vue代码是定义在哪个文件的，你可以全局搜一下new Vue;

Update3:

article.blade.php代码修改如下：

<div id="app">
    // 把div放在app的里面
    <div id="articleTitle" data-id="99">文章标题</div>
    <demo :article-id="articleId"></demo>
</div>

修改app.js文件new Vue部分代码如下，因为没有用过你说的框架，所以你得看看能不能通过框架生成下面的代码，或者生成的app.js可否自己更改：

const app = new Vue({
    el: "#app",
        
    // 以下代码为新增代码
    data: function() {
        return {
            articleId: ""
        }
    },
    // vue2.0使用mounted，vue1.0把mounted换成ready
    mounted: function() {
        var articleTitleElement = document.getElementById("articleTitle");
        var articleId = articleTitleElement.getAttribute("data-id");
        console.log(articleId);
        this.articleId = articleId;
    }
});

Demo.vue代码如下：

props: ["articleId"],
data() {
    return {
        //...
    }
},
methods: {
    submit() {
        // this.articleId即所需的id
        var id = this.articleId;
        // ...
    }
}

注：articleId部分有拼写错误。

Answer 2

<div id="99"></div>
<demo some-id="99"></demo>

Demo.vue

props: ['someId'],
data() {
    return {
        //...
    }
},
methods: {
      submit() {
        console.log(this.someId); //'99'
      }
}

Answer 3

题主，能指导一下吗，遇到了类似的问题，同样用laravel